码迷,mamicode.com
首页 > 其他好文 > 详细

实现回到顶部的效果

时间:2015-02-06 18:33:24      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:

有时候,在一个网页上,由于内容过多,高度很高,可以给该页面添加一个回到顶部的功能。

代码如下。

1、首先创建一个div,点击div时,让其回到网页的顶部。

<div class="rightFix">
<div class="back2Top">回到顶部</div>
</div>

2、添加样式,固定到浏览器的右侧

<style type="text/css">
.rightFix{
    top:300px;  
    right:15px;
    position:fixed;
    z-index:1000;
}

</style>    

3、引用JQuery,添加JQuery代码

<script type="text/javascript">
   $(function(){
        $(".rightFix").click(function(){
             $("body,html").animate({scrollTop:0},500);
         });

         $(window).scroll(function(){
              if($(this).scrollTop()>300)
{$(".rightFix").show();} else{$(".rightFix").hide();} }); }) </script>

 

实现回到顶部的效果

标签:

原文地址:http://www.cnblogs.com/love522/p/4277532.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!