scrollTo：获取按钮图像到scrollTo div

发布于 2024-10-26 18:43:07 字数 462 浏览 6 评论 0原文

我还没有找到真正适合我的情况的答案，我想这很常见。我正在寻找使用 jquery （或 javascript）将scrollTo 效果添加到我的网页。我仍然不知道什么是最简单的方法，因为我没有得到任何工作。 :(

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

您可以在此处查看我的测试页面：我的网站

我尝试过scrollTo，但我的每个按钮都链接到一个特定的div，不知道如何修改该插件以适合我，

我认为下一个最佳解决方案是插入为窗口中的所有链接添加动画效果的javascript。知道在哪里可以找到该代码或如何针对我的情况修改它。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

坠似风落 2024-11-02 18:43:07

尝试这样的事情...

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

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

Try something like this...

working example: 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;
  });
});

回复收藏 0 原文

半世晨晓 2024-11-02 18:43:07

（注意，在您的示例中，您的 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调用中目标元素的拼写错误之后）

(Note, from your example you have the javascript in the title attribute, not an onclick, not sure if that's intended)

This doesn't use a plugin, but you could do something as simple as the following using jQuery:

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

This allows you to just specify the selector to what you want to scroll to, so it could be as simple as:

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

In my quick testing that seemed to work. (After I fixed the typo of the target element in the scrollTo call)

回复收藏 0 原文

~没有更多了~