JavaScript实现网页回到顶部效果

在浏览网页时，当我们浏览到网页底部，想要立刻回到网页顶部时，这时候一般网页会提供一个回到顶部的按钮来提升用户体验，以下代码实现了该功能

HTML代码：

<p id="back-top" style="display:block;">

            <a href="#top">

                <span>返回顶部</span>

            </a>

        </p>

CSS代码：

/* 返回顶部 开始 */

        #back-top {

            position: fixed; /*相对于浏览器窗口进行绝对定位*/

            bottom: 10px;

            right: 15px;

            z-index:;

        }

            #back-top span {

                width: 50px;

                height: 64px;

                display: block; /*将元素显示为块级元素*/

            }

            #back-top a {

                outline: none; /*突出元素*/

            }

        /* 返回顶部 结束 */

JavaScript代码：

$(function () {

            // 隐藏 #back-top

            $("#back-top").hide();

            // 滚动窗口时触发

            $(window).scroll(function () {

                //滚动条的垂直偏移大于500时

                if ($(this).scrollTop() > 500) {

                    //淡入显示

                    $('#back-top').fadeIn();

                } else {

                    //淡入隐藏

                    $('#back-top').fadeOut();

                }

            });

            // 单击按钮滚动到顶部

            $('#back-top a').click(function () {

                //自定义动画

                $('body,html').animate({

                    scrollTop: 0

                }, 800);

                return false;

            });

})

End！

巴特西

JavaScript实现网页回到顶部效果

最新文章

热门文章