2

我正在开发一个单页滚动网站（带有粘性标题），并希望添加动画深度链接。

您可以在此处查看演示：
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/

4

1 回答 1

2

首先，将您的锚标记从绝对 URL 更改为相对 URL（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);
    });
});
于 2012-06-17T02:17:37.717 回答