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

html回到顶部代码

时间:2017-03-27 10:29:12      阅读:644      评论:0      收藏:0      [点我收藏+]

标签:消失   else   动画   als   返回顶部   div   scrolltop   top   function   

HTML代码
<p id="back-to-top"><a href="#top">返回顶部</a></p>
CSS代码
 p#back-to-top{
            position:fixed;
            display:none;
            bottom:100px;
            right:80px;
        }
js代码
 $(function(){
        //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#back-to-top").fadeIn(1500);
                }
                else
                {
                    $("#back-to-top").fadeOut(1500);
                }
            });

            //当点击跳转链接后,回到页面顶部位置
            $("#back-to-top").click(function(){
                if ($(‘html‘).scrollTop()) {
                    $(‘html‘).animate({ scrollTop: 0 }, 100);//动画效果
                    return false;
                }
                $(‘body‘).animate({ scrollTop: 0 }, 100);
                return false;
            });
        });
    });

  记得要引用jQuery文件

html回到顶部代码

标签:消失   else   动画   als   返回顶部   div   scrolltop   top   function   

原文地址:http://www.cnblogs.com/xy-milu/p/6625419.html

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