点击回到顶部效果

最新推荐文章于 2025-05-17 19:53:12 发布

原创最新推荐文章于 2025-05-17 19:53:12 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#top #回到顶部 #点击回到顶部 #锚点

前端专栏收录该内容

2 篇文章

订阅专栏

现在随着业务越来越复杂，在页面上显示的内容页越来越多，所以有可能一个页面从顶部到底部需要滚动条滚动很长，而到了页面底部之后想跳转到顶部，如果还是使用滚动条的话就感觉很费时间。现在像qq空间、csdn等很多网站都在右下角有一个小图标，点击就会跳转的页面顶部，并且该小图标是随着滚动条的滚动出现和隐藏的。下面就给出这种效果的示例。

<html>
<head>
<title></title>
<style type="text/css">
#d-top {position:fixed; float:right; z-index:100; right:10px;
bottom:10px;}
#d-top img { width:42px; filter:alpha(opcity=30); -moz-opacity:0.3; -
khtml-opacity:0.3; opacity:0.3; }
#d-top a:hover img { filter:alpha(opcity=100); -moz-opacity:1; -khtml-
opacity:1; opacity:1; }
</style>
<script type="text/javascript">
$(function(){
$(window).bind("scroll",function(){
var d_top1=$('#d-top');
var heigth = 10;
var scrTop=(document.body.scrollTop||document.documentElement.scrollTop);
if(scrTop>heigth){
d_top1.show();
}else{
d_top1.hide();
}
});
$('#d-top-a').click(function(){
scrollTo(0,0);
this.blur();
return false;
});
});
</script>
</head>
<body>
<div id="d-top" style="display: none;">
<a id="d-top-a" href="#" title="回到顶部">
<img src="top_arrow.png" alt="TOP" border="0px;"></a>
</div>
</body>
</html>

好了，就这么简单。需要注意的是：
1.要引入jquery，需要哪个版本，自己根据项目决定吧。
2.其中的变量height，就是说当滚动条从最上边向下滚动多少px时，在屏幕的右下角出现回到顶部的小图标。
3.这个小图标是一个图片，在上边的body中的div中，img标签的src要根据实际情况改变，图片我已上传可以下载使用。