web-dev-qa-db-ja.com

JQueryを使用して要素にスクロールする方法は？

ページを上部にあるdivまでスクロールします。ページの他の部分のボタンがありますが、一番下までスクロールしてボタンをクリックしても機能しません。ページの一番上に移動しません。これがCodePenです： https://codepen.io/Filizof/pen/xygWyp?editors=101

$(document).ready(function() {
$("#btn1").click(function() {
$("body").scrollTo("#menudiv");
});
});
javascriptjqueryhtmlcssdom
2
user5814955
<script type="text/javascript" src="jquery-3.2.1.js">

と置換する

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
0
Chnkz

コードを少し更新します。

 $(document).ready(function() {
  $("#btn1").click(function()
 {
   var elmnt = document.getElementById("menudiv");
   elmnt.scrollIntoView();
 });
});

Div /要素にスクロールするには、それはscrollIntoView HTML DOMメソッドであり、JQuery関数ではありません。

これがコードペンです JS Scroll to a Element

0
Qammar Feroz

Markdownifyプラグインが原因で少し問題がありましたが、とにかくリンクのターゲットを検索する必要があったため、この回避策を使用しました。実際にはさまざまな要素セレクターで機能しており、私の場合、私のリンクは<a href="#target">some text</a>と私の実際のターゲットは<a href="target"></a>この特定のケースについて、私はあなたにその解決策を与えることができます：

var scrollAnchorSamePage = function() {
    $('a[href^="#"]').click(function() {
      event.preventDefault();
      var id  = $(this).attr("href");

      // okay lets remove the hashtag in front:
      var target = $('a[href^="' + id.substring(1, id.length) + '"]');

      // and I need a little offset due to a fixed sticky header by 140
      $('html, body').animate({ scrollTop: target.offset().top - (160)  }, 1000);
    });
}

scrollAnchorSamePage();

PS：以下のjQueryパッケージのインポートを使用します。閉じる前にそれらを追加できます</body> DOMのhtmlタグ。

<!-- Latest minified jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
0
JasParkety