Gibt es eine einfache Möglichkeit, den Browser zum Scrollen nach oben zu zwingen, wenn auf eine Schaltfläche geklickt wird?Nach oben scrollen
Ich habe versucht,
jQuery('html').scrollTop();
jQuery('body').scrollTop();
jQuery(window).scrollTop();
Keiner von ihnen scheint oben auf der Seite zu blättern.
Aufgrund der Browser-Ungerade reagieren einige Browser auf 'html' und einige auf 'body'. Und vielleicht ist es nur mein Glück, aber .scrollTop(0) hat nie funktioniert, um die Seite zu verschieben. Geben Sie eine Einstellung:
jQuery('html,body').animate({scrollTop:0},0);
Diese Version ist getestet und Cross-Browser für alle Desktop-Browser und mobile Geräte.
Dies funktionierte wie ein Charme. War nicht in der Lage, es in FF, IE oder Safari zu brechen. Habe Chrome noch nicht überprüft. Vielen Dank! –
Btw, ich habe diesen Code auch ausprobiert. Für mich geht das. Aber dachte, dass css tricks ist ein großartiger Name und vielleicht haben sie einen langen Code aus einem Grund :) Danke für die Klärung :) Ich liebte die Antwort des mario auch :) – Jashwant
CSS-Tricks ist ein rockender Blog, von dem ich habe viel gelernt, aber ich stimme ihnen immer noch nicht zu;) – Fresheyeball
können Sie entweder das:
jQuery('body').scrollTop(0);
oder dies:
jQuery(window).scrollTop(0);
oder schließlich diese:
jQuery('html').scrollTop(0);
Also, um die scrollTop Methode aufrufen und machen Sie Ihre Beim Blättern auf der Seite sollten Sie ein Argument mit dem numerischen Wert übergeben, der die Position scrollTop darstellt . Andernfalls funktioniert es so, als müssten Sie die scrollTop-Position abrufen.
Zwei letzte Methoden sollten in allen Browsern ständig funktionieren, während die erste in einigen IE-Versionen möglicherweise nicht funktioniert.
Ich konnte 'Körper' nicht zur Arbeit bringen, aber 'html' funktionierte, solange ich in 0 passierte. Wissen Sie, ob diese Browser übergreifend sind oder in welcher Version diese Methode nicht zufällig funktioniert? –
@JamesWilson Siehe meine Antwort für eine einfache Cross-Browser-Lösung. – Fresheyeball
@JamesWilson Es kommt darauf an. Sie können die Methode von Fresheyball ausprobieren, aber ohne animieren, einfach: 'jQuery ('html, body'). ScrollTop (0);' – VisioN
Dies ist die Cross-Browser-Art und Weise,
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
var scrollElem = scrollableElement('html', 'body');
$(scrollElem).scrollTop(0);
-Code von CSS-Tricks
Wissen Sie, ob diese Methode besser ist als die von Fresheyeball? Oder machen sie etwa dasselbe hinsichtlich der Browserkonsistenz? –
@JamesWilson sie tun im Grunde das gleiche, außer dass diese Methode die unnötige Arbeit der Bestimmung von "body" oder "html" durchläuft, bevor sie es benutzt. Ehrlich gesagt, es gibt viel zusätzlichen Code für die Lösung. – Fresheyeball
Einfach rein JavaScript aktivieren, funktioniert auch in mobilen
window.scrollTo(0,0);
Da niemand die erforderlichen HTML erwähnt Ich füge es hier hinzu.
zuerst Ihr Ankerelement erstellen:
<a href="#" title="Scroll to Top" class="ScrollTop">Scroll To Top</a>
Beachten Sie die Klasse durch die folgende jQuery verwiesen wird.
Dann fügen Sie Ihre jQuery:
$(document).ready(function(){
$('.ScrollTop').click(function() {
$('html, body').animate({scrollTop: 0}, 800);
return false;
});
});
die Geschwindigkeit der Animation ändern Sie die "800" Wert einzustellen.
Dies liegt daran, dass [scrollTop()] (https://api.jquery.com/scrollTop/) nicht wirklich durch die Seite blättert, es sei denn, es wird ein Wert angegeben. Ohne Wert wird nur ein Pixelwert zurückgegeben, der die * Bildlaufposition * als Offset vom * oberen * der Seite darstellt. – Warpling