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

时间：2023-12-29 21:06:44

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;

    });

});

相关文章