jQueryボタンをクリックしてページ上の特定の位置、divまたはターゲットにジャンプするonclick

Question

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

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

どうすればいいですか？

Answer 1

$("html, body").scrollTop($(element).offset().top); // <-- Also integer can be used 

Answer 2

私はボタンのように見えるようにスタイルを設定します。その方法はno-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>

---

数Ne例：リンクの実際のボタンスタイルで、ポイントを証明するだけです。

私はクラス.jumperを.buttonに変更したほか、リンクをボタンのように見せるためにCSSのスタイリングを追加しました。

Button styles example