php - div 之间的 jquery 平滑网站导航

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 缓动插件 (http://gsgd.co.uk/sandbox/jquery/easing/)，那么您可以从多种缓动类型中进行选择。我喜欢 easeInOutExpo 动画页面滚动。