306

div id jqueryコードへのスクロールを正しく機能させようとしています。別のスタックオーバーフローの質問に基づいて、次のことを試しました

デモhttp://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

しかし、うまくいきませんでした。divにスナップするだけです。私も試しました

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

進歩なし。

4

15 に答える 15

789

アニメーション化する必要がありますhtml, body

デモhttp://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});
于 2013-09-25T18:36:45.503 に答える
126

スムーズなスクロールのために HTML マークアップを変更せずに、ページの標準の href-id ナビゲーションをオーバーライドする場合は、次のようにします(例):

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});
于 2014-09-30T20:54:54.043 に答える
29

これが私の2セントです：

Javascript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

HTML:

<a class="scroll" target="contact">Contact</a>

そしてターゲット：

<h2 id="contact">Contact</h2>
于 2014-03-17T13:16:23.500 に答える
12

もう1つの例：

HTML リンク:

<a href="#featured" class="scrollTo">Learn More</a>

JS:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

HTML アンカー:

  <div id="featured">My content here</div>
于 2016-12-28T20:36:46.423 に答える
7

これが私が使用するものです：

<!-- jquery smooth scroll to id's -->   
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

これの利点は、それぞれに対して新しいスクリプトを実行する必要なく、無制限の数のハッシュリンクと対応する ID を使用できることです。

WordPress を使用している場合は、テーマのfooter.phpファイルの body タグの直前にコードを挿入します</body>。

テーマ ファイルにアクセスできない場合は、コードを投稿/ページ エディター内 (テキスト モードで投稿を編集する必要があります) に埋め込むか、すべてのページに読み込まれるテキスト ウィジェットに埋め込むことができます。

他の CMS または HTML のみを使用している場合は、すべてのページに読み込まれるセクションの body タグの直前にコードを挿入できます</body>。

詳細が必要な場合は、こちらの簡単な投稿をご覧ください: jQuery Smooth Scroll to id

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2015-02-20T14:52:20.107 に答える
6

このコードは、ウェブ上の内部リンクに役立ちます

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });
于 2019-02-19T20:01:13.740 に答える
5

jQuery scrollTo プラグイン ファイルを読み込んでいますか?

object: method not found "scrollTo" エラーがコンソールに表示される可能性があります。

scrollTO メソッドはネイティブの jquery メソッドではありません。これを使用するには、jquery scroll To プラグイン ファイルを含める必要があります。

参照: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

soln: これを head セクションに追加します。

<script src="\\path\to\the\jquery.scrollTo.js file"></script>
于 2013-09-25T19:37:18.277 に答える
4

このスクリプトは、Vector のスクリプトを改良したものです。私はそれに少し変更を加えました。したがって、このスクリプトは、クラス page-scroll を含むすべてのリンクに対して機能します。

最初は緩和せずに:

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

イージングには、Jquery UI が必要です。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

これをスクリプトに追加します。

'easeOutExpo'

最後の

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

ここで見つけることができるすべてのイージング: Cheat Sheet .

于 2015-12-08T13:18:39.713 に答える
2

次の単純な jQuery コードを使用してそれを行うことができます。

チュートリアル、デモ、およびソース コードは、ここから見つけることができます - Smooth scroll to div using jQuery

JavaScript:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

HTML:

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>
于 2016-01-29T06:41:37.750 に答える