web-dev-qa-db-ja.com

jQueryは、ボタンonclickからページ上の特定の位置、div、またはターゲットにジャンプまたはスクロールします

ボタンをクリックすると、ページ上の特定のdivまたはターゲットにジャンプまたはスクロールできるようになります。

$('#clickMe').click(function() {
    //jump to certain position or div or #target on the page
});

これどうやってするの？

javascriptjqueryhtmlcssscroll
35
John

ボタンのように見えるようにリンクのスタイルを設定します。そうしないと、jsのフォールバックがないからです。

これが、jqueryを使用してジャンプをアニメーション化する方法です。 No-jsフォールバックは、アニメーションなしの通常のジャンプです。

元の例：

jsfiddle

$(document).ready(function() {
  $(".jumper").on("click", function( e ) {

    e.preventDefault();

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

  });
});
#long {
  height: 500px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Links that trigger the jumping -->
<a class="jumper" href="#pliip">Pliip</a>
<a class="jumper" href="#ploop">Ploop</a>
<div id="long">...</div>
<!-- Landing elements -->
<div id="pliip">pliip</div>
<div id="ploop">ploop</div>

新しい例、リンクの実際のボタンスタイルを使用して、ポイントを証明します。

クラス.jumperを.buttonに変更し、リンクがボタンのように見えるようにCSSスタイルを追加したことを除いて、すべてが基本的に同じです。

Button styles example

45
Joonas
$("html, body").scrollTop($(element).offset().top); // <-- Also integer can be used
34
Muhammad Talha Akbar