jQueryを使用してページの特定の場所にスクロールすることは可能ですか?
私がスクロールしたい場所が必要です:
<a name="#123">here</a>
または、特定のDOM IDに移動できますか?
jQueryを使用してページの特定の場所にスクロールすることは可能ですか?
私がスクロールしたい場所が必要です:
<a name="#123">here</a>
または、特定のDOM IDに移動できますか?
回答:
jQuery Scrollプラグイン
これはjqueryでタグ付けされた質問なので、このライブラリにはスムーズなスクロールのための非常に優れたプラグインがあるので、ここで見つけることができます:http : //plugins.jquery.com/scrollTo/
ドキュメントからの抜粋:
$('div.pane').scrollTo(...);//all divs w/class pane
または
$.scrollTo(...);//the plugin will take care of this
スクロール用のカスタムjQuery関数
カスタムスクロールjquery関数を定義することにより、非常に軽量なアプローチを使用できます。
$.fn.scrollView = function () {
return this.each(function () {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
});
}
そしてそれを次のように使用します:
$('#your-div').scrollView();
ページ座標までスクロール
または属性を持つアニメーションhtml
とbody
要素scrollTop
scrollLeft
$('html, body').animate({
scrollTop: 0,
scrollLeft: 300
}, 1000);
プレーンJavaScript
スクロール window.scroll
window.scroll(horizontalOffset, verticalOffset);
要約するだけで、window.location.hashを使用してIDの要素にジャンプします
window.location.hash = '#your-page-element';
直接HTMLで(アクセシビリティの強化)
<a href="#your-page-element">Jump to ID</a>
<div id="your-page-element">
will jump here
</div>
うん、プレーンなJavaScriptでも簡単です。要素にIDを指定すると、それを「ブックマーク」として使用できます。
<div id="here">here</div>
ユーザーがリンクをクリックしたときにスクロールしたい場合は、実証済みの方法を使用できます。
<a href="#here">scroll to over there</a>
プログラムでそれを行うには、 scrollIntoView()
document.getElementById("here").scrollIntoView()
プラグインを使用する必要はありません。次のように実行できます。
var divPosition = $('#divId').offset();
次に、これを使用してドキュメントを特定のDOMにスクロールします。
$('html, body').animate({scrollTop: divPosition.top}, "slow");
.animate
呼び出しが発生する直前に再計算する
これは純粋なJavaScriptバージョンです。
location.hash = '#123';
自動的にスクロールします。「#」プレフィックスを忘れずに追加してください。
<div id="idVal">
<!--div content goes here-->
</div>
...
<script type="text/javascript">
$(document).ready(function(){
var divLoc = $('#idVal').offset();
$('html, body').animate({scrollTop: divLoc.top}, "slow");
});
</script>
この例は、特定のdiv id、つまりこの場合は 'idVal'を見つけることを示しています。ajaxを介してこのページで開く後続のdiv /テーブルがある場合、一意のdivを割り当て、スクリプトを呼び出して、divの各コンテンツの特定の場所にスクロールできます。
これが役立つことを願っています。
これを試して
<div id="divRegister"></div>
$(document).ready(function() {
location.hash = "divRegister";
});
@ juraj-blahunkaの軽量アプローチのバリアントを以下に示します。この関数は、コンテナがドキュメントであるとは想定せず、アイテムが表示されていない場合にのみスクロールします。アニメーションのキューも無効になり、不必要なバウンスを回避します。
$.fn.scrollToView = function () {
return $.each(this, function () {
if ($(this).position().top < 0 ||
$(this).position().top + $(this).height() > $(this).parent().height()) {
$(this).parent().animate({
scrollTop: $(this).parent().scrollTop() + $(this).position().top
}, {
duration: 300,
queue: false
});
}
});
};
jquery.easing.min.jsの使用、IEコンソールのエラーの修正
HTML
<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
jquery
//jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
$(window).scroll(function () {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function () {
$('a.page-scroll').bind('click', function (event) {
var anchor = $(this);
if ($(anchor).length > 0) {
var href = $(anchor).attr('href');
if ($(href.substring(href.indexOf('#'))).length > 0) {
$('html, body').stop().animate({
scrollTop: $(href.substring(href.indexOf('#'))).offset().top
}, 1500, 'easeInOutExpo');
}
else {
window.location = href;
}
}
event.preventDefault();
});
});
location.hash = 'idOfElement';
十分なはずです
あなたはscroll-behavior: smooth;
Javascriptなしでこれを行うために使用できます
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior