码迷,mamicode.com
首页 > Web开发 > 详细

Jquery点击返回顶部

时间:2015-11-04 12:49:57      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:

  <a href="#top" class="goToTop" style=" display: inline;">返回顶部</a>

  css样式:

 .goToTop a 
{
   color: #666;
}
.goToTop 
{
  background: url(../Scripts/top.png) no-repeat;
  display: none;
  position: fixed;
  top: 50%;
  margin-top: -48px;
  right: 10px;
  width: 20px;
  line-height: 18px;
  padding-top: 17px;
  text-align: center;
  padding-left: 1px;
  left: 1569px;
  display: inline;
}

js:

  $(document).ready(function () {
            $(".goToTop").hide() //实现隐藏
            $(function () {
                $(window).scroll(function () {   //鼠标滚动
                    if($(this).scrollTop()>1)
                    {
                        $(".goToTop").fadeIn();
                    }
                    else {
                        $(".goToTop").fadeOut();
                    }
                });
            });
            $(".goToTop a").click(function () {
                $("html,body").animate({ scrollTop: 0 }, 800);   //点击触发animate css的改变
                return false;
            });
        });

 

Jquery点击返回顶部

标签:

原文地址:http://www.cnblogs.com/cylblogs/p/4935419.html

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