0

我正在使用 Zurb 的基金会来创建一个网站。我将它的顶部栏用于我的菜单并使其粘在页面上。这是一个单页，所以要转到页面的其他部分，我想使用顶栏。当用户点击“联系人”时，我希望页面滚动到网站的联系人部分（id="contact" 的 div），并具有平滑的滚动效果。

我尝试了很多东西，例如： 动画自动滚动到 div onclick
和： jQuery 从按钮 onclick 跳转或滚动到页面上的某个位置、div 或目标

但事实是，无论我尝试什么页面都不会滚动。有趣的是，它正在显示动画效果。但它不会进入联系部分，而是进入页面顶部。

我在这里遗漏了一些明显的东西吗？或者是Zurb的基金会在干预？

可以在此处找到该页面的示例：Out of date example

任何有助于解决我的无能的建议将不胜感激！

4

2 回答 2

1

你的锚都工作正常，但是如果你想要一个平滑的滚动效果 - 类似于使用鼠标滚轮时会发生的情况 - 你将需要一些 jQuery 插件来做到这一点。

谷歌搜索“jquery 平滑滚动”将提供一堆你可以使用的东西，例如第一个条目是 GitHub 链接，这是我在各种项目中使用的链接（https://github.com/kswedberg/jquery-smooth-滚动）。您需要做的就是拉入 jQuery 文件，使用 smoothScroll() 初始化一个特定的类，然后让您想要滚动的任何标签都具有该类。

它在其自述文件中详细解释了如何使用它。

于 2013-10-16T10:28:19.157 回答
1

我用过这个很多。我忘记了我从哪里“借来”的，所以我不知道该归功于谁..

$(function() {
// Slow slides for internal links
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top - 30
            }, 1000);
            if ($(window).width() < 600)
            {
                $('nav ul').slideUp();
            }
            return false;
        }
    }
}); 
});
于 2014-05-06T21:51:25.043 回答