javascript 平滑滚动到锚点

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 平滑滚动到锚点相关的知识,希望对你有一定的参考价值。

// smooth scroll to anchor from chris coyier - https://css-tricks.com/snippets/jquery/smooth-scrolling/

jQuery(document).ready(function () {
    // Select all links with hashes
    jQuery('a[href*="#"]')
        // Remove links that don't actually link to anything
        .not('[href="#"]')
        .not('[href="#0"]')
        .click(function (event) {
            // On-page links
            if (
                location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
                location.hostname == this.hostname
            ) {
                // Figure out element to scroll to
                var target = jQuery(this.hash);
                target = target.length ? target : jQuery('[name=' + this.hash.slice(1) + ']');
                // Does a scroll target exist?
                if (target.length) {
                    // Only prevent default if animation is actually gonna happen
                    event.preventDefault();
                    jQuery('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000, function () {
                        // Callback after animation
                        // Must change focus!
                        var $target = jQuery(target);
                        $target.focus();
                        if ($target.is(":focus")) { // Checking if the target was focused
                            return false;
                        } else {
                            $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
                            $target.focus(); // Set focus again
                        };
                    });
                }
            }
        });
    });

以上是关于javascript 平滑滚动到锚点的主要内容,如果未能解决你的问题,请参考以下文章

平滑滚动到锚点

javascript 滚动到锚点

JavaScript Jquery Smotth滚动到锚点链接

Vue路由器导航或滚动到锚点(#锚点)

如何检测自动滚动到锚点?

无法滚动到锚点