2

我已经用几个不同的 jQuery 插件努力了两个小时，试图让我的网站平滑滚动。

这是现在的相关代码：

<div class="row-fluid">
 <header class="span12 hero-unit">
 <ul class="thumbnails">
  <li class="span3"></li>
  <li class="span2">
   <a href="#Blog" class="thumbnail">
   <img src="images/nav_icon-01.png" alt="Blog"/>
   </a>
  </li>
  <li class="span2">
   <a href="#Projects" class="thumbnail">
   <img src="images/nav_icon-02.png" alt="Projects"/>
   </a>
  </li>
  <li class="span2">
   <a href="#Contact" class="thumbnail">
   <img src="images/nav_icon-03.png" alt="Contact"/>
   </a>
  </li>
  <li class="span3"></li>

 </ul>
 </header>
</div>

我已经删除了我所有的 JS 代码（因为我知道我没有正确使用它们中的任何一个并且想重新开始）除了这个，因为这似乎确实有效，但只在页面加载时激活并且我想要知道是否有可能让它在点击时工作。

<script type="text/javascript">
$('html, body').animate({
scrollTop: $("#Blog").offset().top
}, 2000);
</script>
4

2 回答 2

1

我不知道这个插件，但基于什么工作，比如（假设最近的 JQuery）：

$('a.thumbnail').on('click', function() {
  var to = $(this).attr('href'); // $(this) is the clicked link. We store its href.
  $('html, body').animate({ scrollTop: $(to).offset().top }, 2000);
)};

如果您的 JQuery < 1.7，您可以尝试 .click()，无论 JQuery 版本如何，它都可以工作：

$('a.thumbnail').click(function() {
  var to = $(this).attr('href');
  $('html, body').animate({ scrollTop: $(to).offset().top }, 2000);
});
于 2013-02-24T18:31:37.707 回答
1

mddw 提到的工作，除了它会导致相当大的闪烁，除非你阻止浏览器的默认操作如下（另外，他的结束大括号的顺序错误）：

$('a.thumbnail').on('click', function(event) {
  var to = $(this).attr('href');
  $('html, body').animate({ scrollTop: $(to).offset().top }, 500);
  event.preventDefault();
});
于 2013-04-15T01:00:54.140 回答