スクロール位置を設定する


107

スクローラーが一番上までスクロールされるように、ページのスクロール位置を設定しようとしています。

私はこのようなものが必要だと思いますが、うまくいきません:

(function () { alert('hello'); document.body.scrollTop = 0; } ());

何か案は?

回答:




33

ウィンドウ全体ではなく要素をスクロールする場合、要素にはscrollToおよびscrollByメソッドがないことに注意してください。あなたがすべき:

var el = document.getElementById("myel"); // Or whatever method to get the element

// To set the scroll
el.scrollTop = 0;
el.scrollLeft = 0;

// To increment the scroll
el.scrollTop += 100;
el.scrollLeft += 100;

window.scrollToおよびを模倣して、ネイティブでサポートしていないブラウザwindow.scrollByのWebページに存在するすべてのHTML要素を模倣することもできます

Object.defineProperty(HTMLElement.prototype, "scrollTo", {
    value: function(x, y) {
        el.scrollTop = y;
        el.scrollLeft = x;
    },
    enumerable: false
});

Object.defineProperty(HTMLElement.prototype, "scrollBy", {
    value: function(x, y) {
        el.scrollTop += y;
        el.scrollLeft += x;
    },
    enumerable: false
});

あなたができるように:

var el = document.getElementById("myel"); // Or whatever method to get the element, again

// To set the scroll
el.scrollTo(0, 0);

// To increment the scroll
el.scrollBy(100, 100);

注:Object.definePropertyプロパティを直接に追加することprototypeは、悪い習慣になるため(推奨されています:-)。


これは役に立ちました、ありがとう。しかし、要素には「scrollTo」メソッドがあることがわかりました。developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
Narvalex

@Narvalexは2番目の段落で述べています。
ホルヘフエンテスゴンサレス

私が指摘したリファレンスは、それらの関数が組み込まれていることを示しています。組み込みメソッドのプロパティを定義する必要はありません
Narvalex

@Narvalexああ、私はただ「持っていない」を読んだばかりで、私の悪い。そのとき、すべてのブラウザーがそれを備えているわけではないことを述べなければなりません。
ホルヘフエンテスゴンサレス

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.