html 页面回到顶部的事件,页面中的‘返回顶部’（位置固定，指定位置显示/隐藏） Lebal:博客园美化...

在页面中经常需要使用到返回顶部按钮，如果页面内容过多过长，手动滑动滚动条比较麻烦，所以一般会出现返回顶部按钮，一键回到顶部。本文实现的返回顶部的效果，将按钮在滚动条指定高度出现，并固定的页面指定位置。显示为一张图片，鼠标放上显示的是返回顶部文字提示。实现过程如下：

在html文件中：

返回
顶部

这里外面的div作为返回顶部的外层。

内部有两部分：

第一部分是一张图片，从阿里矢量图片库中下载好的矢量图片，如图：

当然也可以根据自己的需要，选择其他样式和颜色。

第二部分是’返回顶部‘四个字，这里需要换行，所以加了标签。

css样式代码

.top_e{

position:fixed;right:10px;bottom:40px;

background:rgba(204,200,255,0.6);

border-radius:15px;

cursor:pointer;

display:none;

width:60px;

height:60px;

}

.top_e:hover{

color:white;

background:#1296DB;

}

上面代码实现了对返回顶部按钮样式的控制，其中position是固定按钮的位置。

当然你也可以根据自己的需要进行调整。

JS代码：控制按钮的显示和消失，也实现了图片和文件的动态转换。

// 控制按钮的显示和消失

$(window).scroll(function(){

if($(window).scrollTop()>300){

$('#return-top').fadeIn(300);

}

else{$('#return-top').fadeOut(200);}

})

// 点击按钮，使得页面返回顶部

$("#return-top").click(function(){

scrollTo(0,0);

});

// 鼠标悬浮按钮之上，图片消失，文字显示

$(".top_e").mouseover(function(){

$("#img").hide();

$("#font").show();

})

//鼠标离开，文字消失，图片显示。

$(".top_e").mouseout(function(){

$("#font").hide();

$("#img").show();

})

JS实现滚动条滚到页面距离底部300PX时执行事件的方法

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离

$(window).scroll(function(){

var scrollTop = $(this).scrollTop();

var scrollHeight = $(document).height();

var windowHeight = $(this).height();

if(scrollHeight-scrollTop-windowHeight <=300){

//当滚动条滚动到距离底部还有300px的时候加载类容

}else{

//当滚动条滚动到距离底部大于300px的时候加载类容

}

});

效果演示

显示返回顶部按钮

鼠标悬浮于上，显示文字提示

看到本文右侧的点赞和踩了吗，当他滚动到页面底部的时候会自动隐藏，可以试一试

参考链接：