簡體   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