平滑滚动

时间:2017-10-03 15:52:36

标签: javascript jquery scroll smoothing

我的javascript平滑滚动代码无效。我不知道为什么。它只是不滚动并指向页面底部。我是javascript的新手所以,请告诉我是否必须将我的网页的任何地址替换为javascript编码。谢谢你

<script type="text/javascript">
$(function() {
    var $window = $(window), $document = $(document),
        transitionSupported = typeof document.body.style.transitionProperty === "string", // detect CSS transition support
        scrollTime = 1; // scroll time in seconds

    $(document).on("click", "a[href*=#]:not([href=#])", function(e) {
        var target, avail, scroll, deltaScroll;

        if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
            target = $(this.hash);
            target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");

            if (target.length) {
                avail = $document.height() - $window.height();

                if (avail > 0) {
                    scroll = target.offset().top;

                    if (scroll > avail) {
                        scroll = avail;
                    }
                } else {
                    scroll = 0;
                }

                deltaScroll = $window.scrollTop() - scroll;

                // if we don't have to scroll because we're already at the right scrolling level,
                if (!deltaScroll) {
                    return; // do nothing
                }

                e.preventDefault();

                if (transitionSupported) {
                    $("html").css({
                        "margin-top": deltaScroll + "px",
                        "transition": scrollTime + "s ease-in-out"
                    }).data("transitioning", scroll);
                } else {
                    $("html, body").stop(true, true) // stop potential other jQuery animation (assuming we're the only one doing it)
                    .animate({
                        scrollTop: scroll + "px"
                    }, scrollTime * 1000);

                    return;
                }
            }
        }
    });

    if (transitionSupported) {
        $("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function(e) {
            var $this = $(this),
                scroll = $this.data("transitioning");

            if (e.target === e.currentTarget && scroll) {
                $this.removeAttr("style").removeData("transitioning");

                $("html, body").scrollTop(scroll);
            }
        });
    }
});
</script>

1 个答案:

答案 0 :(得分:0)

我希望以下内容能为您提供帮助,这将使您在页面底部滚动。

$('html, body').scrollTop( $(document).height() );