首页 > Web开发 > 详细

js 返回顶部

时间:2016-10-26 09:38:26      阅读:222      评论:0      收藏:0      [点我收藏+]
function gotoTop(min_height){
    var gotoTop_html = ‘<div id="gotoTop"></div>‘;//定义返回顶部的html标签,默认隐藏
  $("body").append(gotoTop_html);//将元素插入页面
  $("#gotoTop").click(function(){//定义返回顶部元素的点击事件
    $(‘html,body‘).animate({scrollTop:0},700);//定义页面向上滚动的动画
  }).hover(//为返回顶部元素增加鼠标选中的样式
    function(){$(this).addClass("hover");},
    function(){$(this).removeClass("hover");}
  );
  //获取页面的最小高度,为空则设置默认值
  min_height ? min_height = min_height : min_height = 600;
  $(window).scroll(function(){
    var s = $(window).scrollTop();//获取窗口滚动条的垂直位置
    if(s > min_height){//如果滚动条距顶部的位置大于最小高度,则返回元素渐现
      $("#gotoTop").fadeIn(100);
    }else{//否则返回顶部元素隐藏
      $("#gotoTop").fadeOut(200);
    }
  });
};
gotoTop();

 

js 返回顶部

原文:http://www.cnblogs.com/ywang/p/js.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!