jQuery 的平滑滚动在我的网站上不起作用

Question

我对代码有点陌生，但是当我尝试使用 jQuery 脚本来平滑滚动时，它永远不会工作。

如果我点击我的按钮，它会滚动到 div，但不流畅。

// Document ready shorthand statement
$(function() {
    $('.link').click(function() {
        var id = $(this).attr('href');
        $('html,body').animate({
            scrollTop: $(id).offset().top
        }, 'slow');
        // Prevent default behavior of link
        return false;
    });
});

#portfolio {/* just to make it visible */
    margin-top: 100vh;
}

<a href="#portfolio"><button type="button" class="btn btn-lg btn-outline-info">Scroll down</button></a>

<div id="portfolio" class="container pt-5">
    <div class="row d-flex justify-content-center">
        <img id="thumb" src="images/img/01.jpg" class="img-thumbnail m-2 img-responsive" width="300" height="200">
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

您只是忘记在标记中添加 class“link”...

$(function() {
    // Hint: in this implementation you even don't need to specify a class and write
    // "$('a').click(function( oEvent ) {" instead
    $('.link').click(function( oEvent ) {
        var id = $(this).attr('href'),
            $target = $(id);
        if ( $target.length ) { // check if there is a valid target first @Hint
            oEvent.preventDefault(); // Prevent default behavior of link
            $('html,body').animate({
                scrollTop: $target.offset().top
            }, 'slow');
            // return false prevents event from bubbling which isn't a good practice
        }
    });
});

#portfolio {/* just to make it visible */
    margin-top: 100vh;
}

<!-- dont't forget to add your class "link" -->
<a href="#portfolio" class="link"><button type="button" class="btn btn-lg btn-outline-info">Scroll down</button></a>

<div id="portfolio" class="container pt-5">
  <div class="row d-flex justify-content-center">
    <img id="thumb" src="images/img/01.jpg" class="img-thumbnail m-2 img-responsive" width="300" height="200">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

编辑 |高级代码段（平滑滚动结束后将散列附加到url）

$(function() {
    $('body').click(function( oEvent ) {
        var $link = $( oEvent.target ),$target, sUrl;
        if ( $link[0].hash || ($link = $link.closest('a'))[0].hash ) {
            $target = $( $link[0].hash );
            if ( $target.length ) {
                oEvent.preventDefault();
                sUrl = window.location + $link[0].hash
                $('html,body').animate(
                    { scrollTop: $target.offset().top },
                    'slow',
                    function() { window.location = sUrl; } // set new location
                );
            }
        }
    });
});

如果你want/need一些更深入的解释让我知道...

jQuery 的平滑滚动在我的网站上不起作用

Smooth scroll with jQuery not working on my website

javascript

jquery

html

scroll

smooth-scrolling