0

このテーマに関する多くの例を検索して見ましたが、最善の方法はありませんでした。

私は JS と jQuery に少し慣れているので、スムーズ スクロールについてお聞きしたいと思います。

    <a name="urunler"></a>
<ul>
    <li><a href="#ppanjur" class="uruna">Plastik Panjur</a></li>
    <li><a href="#ipanjur" class="uruna">Alüminyum (İthal / Yalıtımlı) Panjur</a></li>
    <li><a href="#opanjur" class="uruna">Otomatik Panjur</a></li>
    </ul>

このようなナビゲーションがあります。これは即座にスクロールします。でもゆっくりやりたい。これを行うための最短で最も簡単な方法はどれですか? 私は JS に慣れていて、JS プラグインをダウンロードして使用したくありません。

  1. リンクのクリック メソッドを使用して完全な構文を知る必要があります (それらはすべて同じクラスです)。
  2. リンクから href park を削除する必要がありますか?

あなたの助けを待っています & まだ探しています

編集!!!: この状況では、必要なクラスは 1 つだけです。複数のクラスにこのプロパティを与えることは可能ですか?

    function scrollToElement (selector) {
  $('html, body').animate({
    scrollTop: $(selector).offset().top
  }, 2000);    
};

$(document).on('click', 'a.uruna', function () {
    scrollToElement($(this).attr('href'));
});

('click', 'a.uruna', function () を持っています。ここに別のクラスを挿入するにはどうすればよいですか、または次のように書く必要があります。

$(document).on('click', 'a.uruna', function () {
    scrollToElement($(this).attr('href'));
});
$(document).on('click', 'a.new', function () {
    scrollToElement($(this).attr('href'));
});
4

4 に答える 4

3

HTML:

<ul>
    <li><a href="#ppanjur" class="uruna">Plastik Panjur</a></li>
    [...]
</ul>

JS:

function scrollToElement (selector) {
  $('html, body').animate({
    scrollTop: $(selector).offset().top
  }, 2000);    
};

$(document).on('click', 'a.uruna', function () {
  scrollToElement($(this).attr('href'));
});

また

function scrollToElement (obj) {
  $('html, body').animate({
    scrollTop: obj.offset().top
  }, 2000);    
};

$(document).on('click', 'a.uruna', function () {
  scrollToElement($(this));
});
于 2013-09-02T14:07:45.933 に答える
1

JohnJohnGaの回答では、ページがアンカーhrefの位置にすぐにポップしてスムーズにスクロールする前に、「ちらつき」（少なくともGoogle Chromeの場合）が発生することに気付きました。これは、高速なコンピューターでは目立たないかもしれませんが、私が取り組んでいたコンピューターでは明らかに目立ちました. これを回避するために、次のことを行いました。

$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
    window.history.pushState(null, null, $($anchor.attr('href')).selector);
});

これにより、デフォルトのイベントが発生するのを防ぎ、それwindow.history.pushStateを模倣するために使用することに注意してください。pushState をサポートしていない古いブラウザーの場合、正しい場所にスクロールしますが、アドレスの場所は更新されません。

于 2015-08-01T01:21:06.133 に答える