Kaydırma konumunu ayarlayın


107

Bir sayfadaki kaydırma konumunu, kaydırıcıyı tamamen en üste kaydıracak şekilde ayarlamaya çalışıyorum.

Sanırım böyle bir şeye ihtiyacım var ama işe yaramıyor:

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

Herhangi bir fikir?

Yanıtlar:




34

Tam pencere yerine bir öğeyi kaydırmak istiyorsanız, öğelerin scrollTove scrollByyöntemlerine sahip olmadığını unutmayın . Malısın:

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;

Yerel olarak desteklemeyen tarayıcılarda web sayfasındaki tüm mevcut HTML öğelerine window.scrollTove window.scrollByişlevlerini de taklit edebilirsiniz :

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

böylece yapabilirsin:

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

NOT: Object.definePropertyürüne doğrudan özellik eklemek prototypeçok kötü bir alışkanlık olduğu için teşvik edilir (Gördüğünüzde :-).


Bu yardımcı oldu, teşekkürler. Ancak öğelerin 'scrollTo' yöntemine sahip olduğunu buldum. Bkz developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
Narvalex

@Narvalex, ikinci paragrafın ifade ettiği şey bu.
Jorge Fuentes González

Bahsettiğim referans, bu işlevlerin yerleşik olduğunu gösteriyor.
Yerleşik

@Narvalex Oh, "yok" okudum, benim hatam. Günümüzde böyle bir tarayıcı bulmak zor olsa da (IE11 gibi) tüm tarayıcılarda buna sahip olmadığını belirtmeliyim.
Jorge Fuentes González

3

... Ya da sadece yerine bodygöre documentElement:

document.documentElement.scrollTop = 0;
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.