jQuery 一页滚动网站 - 动画深层链接

Question

我正在开发一个单页滚动网站(带有粘性标题)，并且想要添加动画深层链接。

您可以在此处查看演示:
http://www.creativecontroller.com/demo/onepage/

这就是我想要实现的目标:
- 单击导航链接，为 div 设置动画 - 在本例中我使用 html5 部分(完成)
- 在 url 中显示主题标签，例如 ...demo/onepage/#about
- 如果用户点击另一个链接，它会动画、更新 url 标签并动画到右侧的 div
- 如果用户点击后退按钮，它会动画回到前一个 div，而不是仅仅捕捉到它
- 尝试在不使用任何插件(仅 jQuery)的情况下执行此操作

这是我用于页面滚动和粘性标题的 jQuery:

// Page scrolling
$(function() {
    $('a').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 60
        }, 1500,'easeInOutExpo');

        event.preventDefault();
    });
});


// Sticky Nav
$(window).scroll(function(e) {
    var nav_anchor = $(".nav_anchor").offset().top;

    if ($(this).scrollTop() >= nav_anchor && $('.nav').css('position') != 'fixed') 
    {    
        $('.nav').css({
            'position': 'fixed',
            'top': '0px'
        });

        $('.nav_anchor').css('height', '60px');
    } 
    else if ($(this).scrollTop() < nav_anchor && $('.nav').css('position') != 'relative') 
    {   

        $('.nav_anchor').css('height', '0px');

        $('.nav').css({
            'position': 'relative'
        });
    }
});

如有任何帮助，我们将不胜感激，谢谢!

更新:
我发现一个网站可以实现我上面描述的功能:
http://www.maddim.com/demos/spark-r6/

Answer 1

首先，将 anchor 标记从绝对网址更改为相对网址(href="#about" 而不是 href="http://blahfdsjkld.com#about" )。然后像这样更新你的函数:

// Page scrolling
$(function() {
    $('a').bind('click',function(event){

        // Do this first
        event.preventDefault();

        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 60
        }, 1500,'easeInOutExpo');

        // Use an id that isn't on the page, hence the capitalization of the first letter
        window.location.hash = $anchor.html().charAt(0).toUpperCase() + $anchor.html().slice(1);
    });
});