Question

我试图弄清楚如何使用jquery在div之间平滑导航。我有一个带有4个导航div的php网站。因此，当我点击页面上的“工作人员”时，我会导航到该div。我如何使用jquery做到这一点？

这就是我使用它的方式：

<div id="top_links">
<p class="top_link"><a href="#Stofan">The Firm</a></p>
</div>

我试图让它看起来像这个网站：http://themetrust.com/demos/solo/#services

我是jquery的新手。我无法看到我应该怎么做，所以任何建议都将是一个巨大的帮助..谢谢：D

Answer 1

您可以使用jQuery为scrollTop属性设置动画：

$('a').on('click', function (event) {

    //stop the browser from jumping to the anchor
    event.preventDefault();

    //get the href for this link and the offset from the top of the page for the target of that href
    var href  = $(this).attr('href'),
        oset  = $(href).offset().top;

    //animate the scroll to the selected element
    $('html, body').stop().animate({
        scrollTop : oset
    }, 1000, function () {

        //after the animation is complete, update the hash in the address bar so that the state is saved (if the user refreshed the page they can be brought back to this place, but that takes a bit more code)
        location.hash = href;
    });
});

以下是演示：http://jsfiddle.net/Hpegt/1/

这要求您的链接使用以下语法定位页面上的元素：#element-id。

请注意.on()是jQuery 1.7中的新功能，在这种情况下与.bind()相同。

<强>更新

您可以使用此功能添加自定义缓动方法。如果您使用jQuery Easing Plugin（http://gsgd.co.uk/sandbox/jquery/easing/），那么您可以从许多类型的缓动中进行选择。我喜欢easeInOutExpo来动画页面滚动。

Answer 2

您可以使用scrollTo插件：http://demos.flesler.com/jquery/scrollTo/

Answer 3

示例页面正在使用jQuery.ScrollTo

Answer 4

看起来他们正在使用这些库：

Answer 5

您需要使用jQuery的animate()函数来调整window.scrollTop属性以与相应的div对齐。

jquery div之间平滑的网站导航

5 个答案: