Question

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

我尝试了很多东西，例如： animated autoscroll to div onclick
和： jQuery jump or scroll to certain position, div or target on the page from button onclick

但事实是，无论我尝试该页面都不会滚动。有趣的是，它显示了动画效果。但它不会转到联系部分，而是转到页面顶部。

我错过了一些明显的东西吗？或者是Zurb的基金会干扰了吗？

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

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

Answer 1

你的锚点工作正常，但如果你想要一个流畅的滚动效果 - 类似于使用鼠标滚轮时会发生的情况 - 你需要一些jQuery插件才能做到。

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

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

Answer 2

我经常使用它。我忘了我从哪里借来的，所以我不知道该归谁...

$(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;
        }
    }
}); 
});

使用粘性导航滚动到div（基础顶部栏）

2 个答案: