web-dev-qa-db-ja.com

Div id jQueryへのスムーズなスクロール

私は正しく動作するようにdiv id jqueryコードへのスクロールを取得しようとしています。別のスタックオーバーフローの質問に基づいて私は以下を試してみました

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

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

しかし、うまくいきませんでした。それはちょうどdivにスナップします。私も試した

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

進歩なし。

javascriptjqueryscroll
205
StevenPHP

html, bodyをアニメートする必要があります

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

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});
572
Kevin Lynch

スムーズスクロール のHTMLマークアップを変更せずにページ上で標準の href-id navigation をオーバーライドする場合は、次のようにします（ example ）。

// 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});
});
95
dizel3d

これが私の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>
17
Alexandre Mélard

これが私が使っているものです：

<!-- 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>ファイルのコードを挿入します。

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

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

これについてもっと詳しく知りたい場合は、こちらの簡単な投稿をチェックしてください。 jQueryスムーズなスクロールでid

それが役立つことを願っています、そしてあなたがそれについて質問があるかどうか私に知らせてください。

5
Bibiano Wenceslao

もう一つの例：

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>
3
Eugen

jQuery scrollTo Pluginファイルを読み込んでいますか？

あなたがオブジェクトを取得している可能性があります：メソッドは、コンソールに "scrollTo"エラーが見つかりませんでした。

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

ref： http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.htmlhttp://flesler.blogspot.in/2007/10/jqueryscrollto.html

soln：これをheadセクションに追加してください。

<script src="\\path\to\the\jquery.scrollTo.js file"></script>
3
MortalViews

このスクリプトはVectorのスクリプトを改良したものです。少し変更しました。そのため、このスクリプトはクラススクロールを含むすべてのリンクに対して有効です。

最初は緩和せずに：

$("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');
});

あなたがここで見つけることができるすべてのイージング： チートシート 。

2
Ramon Weijenbarg

ここで私はこれを試しました、それは私にとって素晴らしい仕事です。

$('a[href*="#"]').on('click', function (e) {
    e.preventDefault();

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML：

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>
1
waqas noor

このコードは、Web上のあらゆる内部リンクに役立ちます。

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });
1
iDanielBH

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

チュートリアル、デモ、そしてソースコードはここから見つけることができます - jQueryを使ってdivにスムーズにスクロール

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>
1
JoyGuru

これは私には効果があります。

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

ありがとう。

0
Y. Joy Ch. Singha

これが最も簡単です。 - https://www.w3schools.com/jsref/met_element_scrollintoview.asp

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
0
BHISM NARAYAN