点击回到顶部效果博客分类：前端 top回到顶部点击回到顶部锚点

程序员文章站 2024-03-25 18:33:34

...

现在随着业务越来越复杂，在页面上显示的内容页越来越多，所以有可能一个页面从顶部到底部需要滚动条滚动很长，而到了页面底部之后想跳转到顶部，如果还是使用滚动条的话就感觉很费时间。现在像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要根据实际情况改变，图片我已上传可以下载使用。