jqueryを使用してページ上の特定の場所にスクロールするにはどうすればよいですか?


133

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

私がスクロールしたい場所が必要です:

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

または、特定のDOM IDに移動できますか?


3
XHTML 1.1 Strictでは属性 "name"は許可されていません。代わりにIDを使用してください
Juraj Blahunka '19年

興味深い質問です。ページ座標を使用してスクロールできませんか?できるはずだと思います。
Omar Abid、2010

私はであなたの条件に同様のソリューションを持って[こちら] [1] [1]:stackoverflow.com/questions/3432656/...
user1493023

@mrblah問題は解決しましたか?
メグダッドハディディ2013

回答:


242

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();

ページ座標までスクロール

または属性を持つアニメーションhtmlbody要素scrollTopscrollLeft

$('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>

@Juraj Blahunkaに感謝しますが、私はプラグインなしでこれを行います
Meghdad Hadidi 2014年

リンクでScrollToにアクセスできません。更新して頂けますか?
Barna Tekse 2014年

これが答えになるはずです!
neelmeg 2016

128

うん、プレーンなJavaScriptでも簡単です。要素にIDを指定すると、それを「ブックマーク」として使用できます。

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

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

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

プログラムでそれを行うには、 scrollIntoView()

document.getElementById("here").scrollIntoView()

@nickfこれはまだどこでもサポートされていません。caniuse.com/#search=scrollIntoView
Aditya Singh

これはサポートされています(developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)。caniuseを正しく読んでいないと思います。ただし、アニメーション化されません。むしろ、常に素晴らしいとは限らないかなり急なジャンプ。
ペリー2017年

53

プラグインを使用する必要はありません。次のように実行できます。

var divPosition = $('#divId').offset();

次に、これを使用してドキュメントを特定のDOMにスクロールします。

$('html, body').animate({scrollTop: divPosition.top}, "slow");

3
+1これがおそらく最良の答えです。コードはそれほど多くなく、プラグインは必要ありません。
Tricky12 2014

1
ウィンドウのサイズ変更時にオフセットを再計算する必要がある場合があることに注意してください。
Bart Burg 2014年

2
@BartBurgの良い点-または、.animate呼び出しが発生する直前に再計算する
mikermcneil 14

5
単純な答えが大好きです。なぜ人々は物事をそれほど複雑にしなければならないのですか?別のプラグインは必要ありません。
sterfry68 2014年

1
確かに最良の答えです。
ロバートロス

21

これは純粋なJavaScriptバージョンです。

location.hash = '#123';

自動的にスクロールします。「#」プレフィックスを忘れずに追加してください。


1
名前付きアンカーの原始的な方法を使用して、ハッシュを含むURLを持つことができます。例:mywebsite.com/page-about/#123ブックマークには、ハッシュ+ scrollintoview動作も含まれます。
okw

1
あなたは少し説明することができた場合素晴らしいことだ
JGallardo


5
<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の各コンテンツの特定の場所にスクロールできます。

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


4
<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>


コードにコメントを追加すると便利です。質問者が質問を解決するのにどのように役立ちますか?
Artemix

1

これを試して

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

$(document).ready(function() {
location.hash = "divRegister";
});

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
            });
        }
    });
};

バウンスの問題がありましたが、メソッドが機能しません
Anon

0

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';十分なはずです
Kolob Canyon

0

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

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


スクロール動作:スムーズ; ブラウザ互換のプロパティではありません。
スーパーモデル

-リンクに低く、ブラウザの互換性をチェックdeveloper.mozilla.org/en-US/docs/Web/CSS/...
Sairam

はい、リンク内の指定されたテーブルが表示されています:Edge、IE、safariはこのプロパティと互換性がありません。
スーパーモデル
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.