Question

我正在使用单页滚动网站（带有粘贴标题），并希望添加动画深层链接。

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

这是我想要实现的目标：
- 点击导航链接，动画到div - 在这种情况下我使用html5部分（完成）
- 在网址中显示主题标签，例如... demo / onepage /＃about
- 如果用户点击另一个链接，它会动画，更新网址标签并将动画更新为正确的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

首先，将您的锚标记从绝对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);
    });
});

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

1 个答案: