jQuery－ 平滑滚动到页面的某个锚点

jQuery－ 平滑滚动到页面的某个锚点  

 

直接上代码。

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>平滑滚动页面</title>
        <link rel="stylesheet" type="text/css" href="../css/demos.css"/>
        <style type="text/css">
            body {
                font:62.5% "Trebuchet MS", sans-serif;
                margin:64px;
            }
            #h2-caption {
                font:20px "Trebuchet MS", sans-serif;
            }
            p {
                font:16px "Trebuchet MS", sans-serif;
            }
            a {
                font:13.5px "Trebuchet MS", sans-serif;
            }
            .demoHeaders {
                margin-top:2em;
            }
            #div-log {
                font:13.5px "Trebuchet MS", sans-serif;
            }
        </style>
    </head>
    <body>
        <h2 id="h2-caption">jQuery平滑滚动页面到某个锚点</h2>
        <hr><br>
        <!-- 点击的锚点 -->
        <div class="scrollnav" id="scrollnav">
            <a href="#" page-scroll="#scrolltoTop">滑动到页面顶部</a>&nbsp;&nbsp;
            <a href="#" page-scroll="#scrolltoMid">滑动到页面中部</a>&nbsp;&nbsp;
            <a href="#" page-scroll="#scrolltoEnd">滑动到页面底部</a>&nbsp;&nbsp;
        </div>
        <!-- 伪造数据,对应锚点 -->
        <p id="scrolltoTop">jQuery平滑滚动页面 - 页面顶部</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <p id="scrolltoMid">jQuery平滑滚动页面 - 页面中部</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <p id="scrolltoEnd">jQuery平滑滚动页面 - 页面底部</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><hr>
        <script src="../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                jQuery.scrollTo = function( scrollDom, scrollTime ){
                    $(scrollDom).click(function(){
                        var scrollToDom = $(this).attr('page-scroll');
                        // 给 html,body 绑定动画 
                        $('html,body').animate({
                            scrollTop : $(scrollToDom).offset().top
                        },scrollTime);
                    });
                    return false;
                };
                
                // 调用滚动
                $.scrollTo("#scrollnav a",1000);
            });
        </script>
    </body>
</html>

 

posted @ 2016-06-18 20:46  温柔的敲敲敲  阅读(477)  评论(0)    收藏  举报