5

ページでスクロール効果を作ろうとしています。スクロールはスムーズな効果をもたらしますが、アイテムの実際の位置を逃し、数回クリックするとバグが発生し始めます。

たとえば、最後のアイテムをクリックするとそこに移動しますが、その後 3 番目をクリックするとスクロールが一番上 (?) に移動します。だから私はここに何かが欠けていると思います。誰も問題を修正する方法を知っていますか?

これは私のマークアップです:

            <div id="sidebar" class="clearfix">
                <ul>
                    <li>
                        <a href="#one" class="scroll">Muscles - Girls Crazy Go!</a>
                    </li>
                    <li>
                        <a href="#two" class="scroll">Tokyo Youth sports</a>
                    </li>
                    <li>
                        <a href="#three" class="scroll">Harajuku Interviews</a>
                    </li>
                    <li>
                        <a href="#four" class="scroll">Tokyo Youth</a>
                    </li>
                </ul>
            </div>

スクロールする Div の例:

                    <div class="cinematography_box clearfix" id="two">
                        <div class="cinematography_item">
                            <img src="img/cinematography.jpg" alt="cinematography" width="700" height="397">
                        </div>
                        <div class="cinematography_info">
                        </div>
                    </div>

そして私のスクリプト：

    jQuery(document).ready(function($) {
        $(".scroll").click(function(event){     
            event.preventDefault();
            $('#main').animate({scrollTop:$(this.hash).offset().top}, 500);
        });
    });

私はプラグインなしでこれをやろうとしているので、このコードで解決策があればもっと良いでしょう!

4

3 に答える 3

7

ここで使用したいのは.offset()ではなく.position()です。

  $(".scroll").click(function(event){     
    event.preventDefault();
    var scroll_to = $('#' + $(this).data('scroll-to')).position().top; 
    $('#main').animate({ scrollTop:scroll_to }, 500);
  });

次のように入力して、Google Chrome コンソールで簡単に試すことができます。

$(".scroll").off("click");
$(".scroll").click(function(event){     
  event.preventDefault();
  var scroll_to = $('#' + $(this).data('scroll-to')).position().top; 
  $('#main').animate({ scrollTop:scroll_to }, 500);
});

次に、Enter キーを押します。リスナーを強制終了し、この新しいリスナーをアタッチします。

12pxmargin-topがオンになっているため、少しずれていることに注意してください#gallery.cinematography。ドロップするか、12 を追加します。scroll_to

JQuery の Doc は一目瞭然ですが、わからないことがあれば遠慮なく質問してください。

于 2013-02-24T18:53:19.367 に答える
0

それを試してみてください

$(document).ready(function() {
    $(".scroll").click(function(event){
        event.preventDefault();
        var obj = $.browser.webkit ? $('body') : $('html');
        obj.animate({ scrollTop: $('#sidebar').offset().top }, 750, function (){
             //callback function if any
        });
    });
});
于 2013-02-22T10:17:01.793 に答える
0

使用しているトップオフセットは要素からのものであり、ハッシュと同じ id を持つ要素#mainからそれが必要です。.scroll次のコードを変更します。

HTML:

<ul>
    <li>
        <a href="#one" data-scroll-to="one" class="scroll">Muscles - Girls Crazy Go!</a>
    </li>
    <li>
        <a href="#two" data-scroll-to="two" class="scroll">Tokyo Youth sports</a>
    </li>
...

jQuery:

jQuery(document).ready(function($) {        
    $(".scroll").click(function(event){     
        event.preventDefault();

        var scroll_to = $('#' + $(this).data('scroll-to')).offset().top;            
        $('#main').animate({ scrollTop:scroll_to }, 500);
    });
});
于 2013-02-22T09:26:18.060 に答える