2

1ページのスクロールサイト（スティッキーヘッダー付き）で作業していて、アニメーション化されたディープリンクを追加したいと思います。

ここでデモを見ることができます：
http ：//www.creativecontroller.com/demo/onepage/

これが私が達成しようとしていることです：
-navリンクをクリックし、divにアニメーション化します-この場合、私はhtml5セクションを使用しています（完了）
-ハッシュタグを... demo / onepage /＃aboutのようにURLに表示します
-ユーザーが別のリンクをクリックすると、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 に答える