javascript - JQUERY/JS/HTML - 滚动到 div 在 JQuery 3.1.1 上不起作用

Question

我刚刚将 Jquery 版本更改为 3.1.1，突然间我的一些脚本停止工作。

我已经解决了大部分问题，但仍然无法解决滚动到 anchor 脚本的问题...

这里是:

$(document).on('click', 'a', function(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
});

现在不行了，知道如何解决吗？

这也是html脚本部分:

<a class="scrolltomain" href="#content-wrapper">
<span>
<img id="scroller" src="img/scrolldown-1.gif"></img>
<center>Kliknij<br>lub<br>przewiń</center>
</span>
</a>

如果有人能帮助我，我将非常感激。

顺便说一句，chrome 控制台不会显示任何错误。

Answer 1

• 不存在 </img> 这样的标签。图像标签是自动关闭的，例如:<img src=" " />

并且您需要在动画之前定义位置。只需在 animate() 之前定义一个变量即可函数，然后在函数内调用变量。

$(document).on('click', 'a', function(e) {
    e.preventDefault();
    var thisRef = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $( thisRef ).offset().top
    }, 500);
});

a { display: block; text-align: center;  height: 400px; }
#content-wrapper { background: red; height: 300px; margin-top: 500px; color: #fff; font-size: 2em; line-height: 1.6; text-align:center; padding: 20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="scrolltomain" href="#content-wrapper"><img id="scroller" src="http://placekitten.com/25/25" /><br />Kliknij<br />lub<br />przewiń</a>
<div id="content-wrapper"> Content </div>