scrollTo:将按钮图像获取到scrollTo div

Question

我还没有找到一个真正针对我的案例的答案，我想这是很常见的。我希望使用jquery (或javascript)将scrollTo效果添加到我的网页中。我仍然不知道最简单的方法是什么，即使我没有得到任何工作。:(

我只有一个垂直的页面。导航位于每个div包装器的底部。我想让我的按钮区域滚动到div。到目前为止，我已经设置了链接到Div的按钮的样式。这是完美的，除了我需要添加动画。

你可以在这里看看我的测试页面：my site

我尝试过scrollTo，但我的每个按钮都链接到一个特定的div。不确定如何修改插件来为我工作。

我认为下一个最好的解决方案是插入javascript，它可以在窗口中动态显示所有链接。我绝对不知道在哪里可以找到这些代码，也不知道如何根据我的情况修改它。

提前感谢大家，我期待着来自一个充满活力的社区的解决方案。

Answer 1

试试这样的..。

工作示例： http://jsfiddle.net/BTncy/

$(document).ready(function(){
  $('a').click(function(){
    var ele_href= $(this).attr('href');
    $('html,body').animate({scrollTop: $('#' + ele_href).offset().top},'slow');
    return false;
  });
});

Answer 2

(请注意，在您的示例中，title属性中有javascript，而不是onclick，不确定这是否是有意的)

这不使用插件，但您可以使用jQuery完成如下所示的简单操作：

function scrollTo (element) {
    var target = $(element).offset();
    $('body').animate({scrollTop: target.top}, 'slow');
}

这允许您只指定要滚动到的选择器，因此它可以像下面这样简单：

<div id="more">
    <a onclick="scrollTo('#intro_2_container'); return false;" href="#into_2_container">
        <img src="images/more.png" border="0" />
    </a>
</div>

在我的快速测试中，这似乎是有效的。(在我修复了scrollTo调用中目标元素的拼写错误之后)