Question

这里有一些代码，我写了 -

      $('#go').on('click', function(e){
       e.preventDefault()
       var href = $('#go').attr('href');
       console.log(href)
       $('html, body').animate({
        scrollTop: $(href).offset().top
      }, )
  })

我不确定为什么会这样，谢谢你的帮助!!!

Answer 1

在animate函数中添加一些时间值，例如animate((),1000)。它们会产生平滑效果。请参阅 jquery documentation of animate()

$('#go').on('click', function(e){
       e.preventDefault()
       var href = $('#go').attr('href');
       console.log(href)
       $('html, body').animate({
        scrollTop: $(href).offset().top
      },1000 )
  })

Answer 2

您需要查看的两件事

正确撰写HTML。在您的案例#

<a id="go" href="#goTo">GOOO</a>

检查您的id是否正确用html写入，然后用JQ

 $('#go').on('click', function(e){
       e.preventDefault()
       var href = $('#go').attr('href');
       $('html, body').animate({
        scrollTop: $(href).offset().top
      }, 1000)
  })

div {
	margin-top:100vh;
	height:100px;
	background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="go" href="#goTo">GOOO</a>
<div id="goTo">

</div>

Answer 3

好吧，如果您使用的是像Material Design lite这样的CSS框架，那么您需要使用不同的东西。

adjust_text

将其包装成“.mdl-layout__content”，而不是“html，body”，因为它修复了它。我有同样的问题，但修复了它：）

Jquery Smooth Scroll不工作，几乎尝试了一切

3 个答案: