1

2 つのアンカー間でページを上下にスライドさせる簡単なスクリプトがあります。

$(document).ready(function() {

    $('a.switch').each(function() {
        var self = this;
        if(self.hash) {
            $(self).click(function() {
                $('html, body').stop().animate({
                    scrollTop: $(self.hash).offset().top
                }, 2000);
            });
         }
    });

});

ただし、ページを開いた後に初めてこの関数が呼び出されると、アニメーションはなく、2 番目のアンカーに即座にジャンプするだけです。その後、正常に機能を再開します。

誰が何が起こっているのか、それを修正する方法を説明できますか?

4

1 に答える 1

1

ページの読み込み時に最初の要素をスクロールし、class name switchそれぞれにクリックイベントを追加したい場合は、これを試すことができます

$(document).ready(function() {
    var els=$('a.switch');
    $('html, body').stop().animate({
        scrollTop: $(els[0].hash).offset().top // els[0]=the first element, you can use the id too
    }, 2000);

    els.on('click', function(e) { // I've used 'on' and didn't use 'each'
        var self = this;
        if(self.hash) {    
            $('html, body').stop().animate({
                scrollTop: $(self.hash).offset().top
            }, 2000);
        }
    });
});​

デモ。

于 2012-09-07T05:48:43.727 に答える