[HTML/JS] JQuery 页面滚动回到顶部

 HTML:

<html>
<body>

<div id="back-to-top" style="cursor:pointer; display:block;">
上升按钮
</div>

</body>
</html>

 

 

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(){
                $('body,html').animate({scrollTop:0},1000);
                return false;
            });
        });
    });

 

======

扩展升级:

点击菜单按钮, 动态滚动到对应位置.

HTML:

　　　　　　<div id="header_nav">
                        <ul>
                            <li>
                                <a href="#home">首页</a>
                            </li>
                            <li>
                                <a href="#download">下载</a>
                            </li> 
                            <li>
                                <a href="#contact">联系</a>
                            </li>
                        </ul>

   　　　　</div>

 

JS:

// -- initial --
$(document).ready(function() {
    
    
    $("#header_nav a").click(function(){
        var selector=$(this).attr("href"); 
        var top = $(selector).offset().top;
        var current_top = $('body').scrollTop();
        var animate_time=  Math.abs( current_top - top ) * 0.8; // 800px per second. 
        $('body,html').animate({scrollTop:top},animate_time);
        return false;
    });


});

 

 

 

posted @ 2013-09-16 15:46  瀚瀚  阅读(9852)  评论(0)  编辑  收藏  举报