135

jQueryを使用してページ上の特定の場所にスクロールすることは可能ですか?

スクロールしたい場所には次のものが必要ですか？

<a name="#123">here</a>

それとも、特定の DOM ID に移動できますか?

4

11 に答える 11

243

jQueryスクロールプラグイン

これは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化するbodyscrollTopscrollLeft

$('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>
于 2009-10-18T23:52:11.693 に答える
129

うん、普通の JavaScript でもとても簡単です。要素に id を指定すると、それを「ブックマーク」として使用できます。

<div id="here">here</div>

ユーザーがリンクをクリックしたときにそこにスクロールしたい場合は、実証済みの方法を使用できます。

<a href="#here">scroll to over there</a>

プログラムでそれを行うには、使用しますscrollIntoView()

document.getElementById("here").scrollIntoView()
于 2009-10-18T23:47:06.710 に答える
21

純粋なJavaScriptバージョンは次のとおりです。

location.hash = '#123';

自動的にスクロールします。「＃」プレフィックスを追加することを忘れないでください。

于 2009-10-18T23:49:55.473 に答える
7

プレーン Javascript:

window.location = "#elementId"
于 2014-08-19T21:30:13.870 に答える
6 
<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 の各コンテンツの特定の場所にスクロールできます。

これが役立つことを願っています。

于 2013-09-18T21:34:06.600 に答える
1

これを試して

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});
于 2016-12-06T12:10:41.683 に答える
0

これは、@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
            });
        }
    });
};
于 2015-10-05T21:33:12.383 に答える
0

scroll-behavior: smooth;Javascriptなしでこれを行うために使用できます

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

于 2018-11-03T05:52:17.260 に答える