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

您忘了添加课程＆＃34; 链接＆＃34;在你的标记...

＆＃13;

$(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
        }
    });
});

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

编辑|高级代码段（在平滑滚动结束后将哈希值附加到网址）

$(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
                );
            }
        }
    });
});

如果你想要/需要更深入的解释，请告诉我......

使用jQuery的平滑滚动无法在我的网站上运行

1 个答案: