返回顶部js/jq

返回顶部

  网页中常带返回顶部的功能，当用户滚到一定的界面的时候点击该功能立即返回顶部。

1.使用锚标记

• 在页面顶部加入隐藏的锚点进行标记<a name="top" id="top></a>
• 在页面底部加入访问链接<a href="#top" target="_self">返回顶部</a>
• 点击返回顶部按钮，会直接跳至页面顶部，并且url地址栏中增加#top

2.使用js scrollTo函数

•   scrollTo(xnum,ynum)用来滚动页面到指定位置。

<a href="javascript:scrollTo(0,0);">返回顶部</a>

• js带有动画版本，淡入和淡出效果

        var btn=document.getElementById('back');
        var d=document.documentElement;
        window.οnscrοll=set;
        var removeTimer;//定时器
        btn.addEventListener('touchstart',function(){
            btn.style.display="none";
            window.οnscrοll=null;
            this.timer=setInterval(function(){
                d.scrollTop-=Math.ceil(d.scrollTop*0.1);
                if(d.scrollTop==0) clearInterval(btn.timer,window.οnscrοll=set);
            },10);
        });
        function set(){
            if (d.scrollTop > 50) {
                btn.style.display = 'block';
                if (removeTimer) {
                    clearTimeout((removeTimer));
                }
                removeTimer = setTimeout(function(){
                    btn.style.display = 'none';
                },3000);
            }else{
                btn.style.display = 'none';
            }
        }

3.jquery带有动画返回顶部

$(window).scroll(function(event) {
        /* Act on the event */
        var scrollTop = $(this).scrollTop();
        if (scrollTop > 200) {
            $('#back').fadeIn(1500);//淡入
        }else{
            $('#back').fadeOut(1500);//淡出
        }
    });
    $('#back').on('touchstart', function(event) {
        $('body').animate({scrollTop:0},1000)//返回顶部
    });