繁体   English   中英

平滑滚动

[英]Smooth Scrolling

我的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>

希望以下内容对您有所帮助,这将使您在页面底部滚动。

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM