JavaScript 平滑滚动解释

Question

我在许多页面上看到了以下代码片段。据我了解，它是用来根据不同的id anchor 标签平滑滚动的。但是，我仍然对正则表达式替换、this 和 hash 变量的工作原理感到有点困惑。

这个频繁出现的代码片段到底是做什么的？

$(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
});

Answer 1

在代码中，this 指的是单击的链接。 this.hash 指的是链接的hash。

以下是代码的进一步分割:

$(function() {

    // Binding an event handler to all anchors that contain
    // a hash (#), but not necessarily JUST a hash - like href="#"
    // which is typically used in JS...

    $('a[href*=#]:not([href=#])').click(function() {

        // Two conditional checks
        // First:
        // location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
        // What we're doing is replacing the first forward slash (/) in the pathname
        // for the current location and comparing it to the link that's been clicked.
        // So http://personalsite.com/test/link/src, which normally would have
        // a pathname of /test/link/src would be test/link/src

        // The or check (||) is to see if the link matches the current domain
        // location.hostname == this.hostname

        // Basically, we want an internal anchor for the page we're on.

        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

            // Assigning the variable target, with the hash of the link that's been clicked
            // which is conveniently enough, a jquery selector for IDs (i.e. #hash)
            var target = $(this.hash);

            // We check the target length - basically, does the element exist?
            // If length equals to 0, we query the DOM by name attribute. Otherwise, we just re-assign target to self.
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

            // The rest is self explanatory... (animation  using the target's offset)
            // The return false prevents default behavior

            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

希望这有帮助!