1

Jqueryを使用してアンカーまでスムーズにスクロールするメニューがあります。セットアップはうまく機能します。

例： http： //jsfiddle.net/23VeR/

$(document).ready(function(){
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 500, 'swing', function () {
        window.location.hash = target;
    });
});
});

うまくいけば、これは他の誰かが解決策を探しているのに役立つでしょう。

スクロールが終了した後、divを強調表示する（その後ゆっくりとフェードバックする）方法を探していましたが、完全なjquery noobであるため、簡単な解決策を見つけることができません。

4

2 に答える 2

2

現時点で持っているものだけを使用して、バックグラウンドで一時的な要素を「フラッシュ」してから削除することで、何かを行うことができました。

$('<div />')
    .css({
        'width':'100%',
        'height':'100%',
        'position':'absolute',
        'display':'none',
        'background':'red',
        'top':'0',
        'left':'0'
    })
    .prependTo($target)
    .fadeIn('fast', function(){
        $(this).fadeOut('fast', function(){
            $(this).remove();
        });
    });

http://jsfiddle.net/23Ver/1/

残念ながらテキストの前に表示されるので<div>、HTML にいくつかの を追加し、いくつかのpositionCSS 属性を設定しました。だから、これをチェックしてください：

http://jsfiddle.net/23Ver/2/

コメント内の私のリンクを見る価値があるかもしれません-または、cssbackground-color属性をアニメーション化できる他のプラグインがいくつかあります。

また、下位互換性にこだわらない場合は、CSS3 トランジションを使用できます。詳細については、この質問を参照してください:背景色の移行

于 2013-03-21T12:28:30.473 に答える