Question

我有一个固定的标题栏，基本导航如下：

<html>
<head></head>
<body>
<ul class="nav navbar-nav">
  <li><a id="aboutme" href="#about-me">About</a></li>
  <li><a id="workme" href="#work-me">Work</a></li>
  <li><a id="contactme" href="#contact-me">Contact</a></li>
</ul>
...
..
.
<div id="about-me">
</div>
</body>
</html>

我希望这些使用'线性'，'慢'动画值指向同一页面中的某个部分，但我的代码无效：

$(document).ready(function() {

  $('aboutme').click(function() {
    $.scrollTo($("#about-me"),{duration: 1});
  });
});

你知道我的语法出错了吗？我是否需要在github上使用jQuery animatedScroll来实现这一目标？

谢谢：）

Answer 1

无论如何，这里是如何在没有插件的情况下为滚动设置动画？

$(document).ready(function() {
    $('#aboutme').click(function(e) {
       e.preventDefault();
       $('body, html').animate({scrollTop : $('#about-me').offset().top}, 'slow');
    });
});

Answer 2

我猜你正在使用这个ScrollTo插件。

在你的功能中首先引用你的按钮，你有：

$（ 'aboutme'）

必须是

$（ '＃aboutme'）

然后用,设置时间值，如下所示：

$('#aboutme').click(function(e) {
  e.preventDefault();
  $.scrollTo($("#about-me"),800);
});

选中 Demo Fiddle

简单的jQuery scrollTo将无法工作/动画

2 个答案: