js 返回顶部

Posted 2020-08-16 小时光

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();