Cum pot defila la partea de sus a paginii folosind un JavaScript? Este de dorit, chiar dacă bara de defilare imediat sare la partea de sus. Am'nu sunt în căutarea pentru o defilare netedă.
Dacă tu nu't nevoie de schimbare pentru a anima atunci tu nu't nevoie de a utiliza orice plugin-uri speciale - am'd folosi doar nativ JavaScript fereastră.metoda scrollTo -- trecerea de la 0,0 va derula pagina în partea de sus stânga instantaneu.
window.scrollTo(x-coord, y-coord);
Parametrii
Dacă vrei defilare lină, încercați ceva de genul asta:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Care va lua orice <a> tag cărui
href="#top" și să-l neted, derulați până la partea de sus.
O soluție mai bună cu animatie buna:
// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });
Referință: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example
Toate aceste sugestii de muncă mare pentru diverse situații. Pentru cei care găsesc această pagină printr-o căutare, o poate da, de asemenea, acest o încercare. JQuery, nu plug-in, defilați la element.
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
smooth scroll, pur javascript:
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();
Dacă vrei să faci defilare lină, vă rugăm să încercați acest lucru:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
O altă soluție este de activarea JavaScript-ului.metoda scrollTo :
window.scrollTo(x-value, y-value);
Parametri :
Foarte ciudat: Această întrebare este activ timp de cinci ani și încă nu există vanilie JavaScript răspunsul la anima defilare... Deci, aici te duci:
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if ( pos > 0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 16); // how fast to scroll (this equals roughly 60 fps)
Dacă vă place, puteți încheia aceasta în funcție și de apel, care, prin intermediul "onclick" atribut. Verifica acest lucru [jsfiddle][1]
Notă: Aceasta este o soluție de bază și poate nu cel mai performant una. Un foarte elaborat exemplu poate fi găsit aici: https://github.com/cferdinandi/smooth-scroll
Cu fereastra.scrollTo(0, 0);` este foarte rapid
așa că am încercat Marca Ursino exemplu, dar in Chrome nu se întâmplă nimic
și am găsit asta
$('.showPeriodMsgPopup').click(function(){
//window.scrollTo(0, 0);
$('html').animate({scrollTop:0}, 'slow');//IE, FF
$('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
$('.popupPeriod').fadeIn(1000, function(){
setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
});
});
testat toate cele 3 browsere și funcționează
am'm folosind blueprint css
acest lucru este atunci când un client dă clic "Cartea acum" buton și nu't au perioada de inchiriere selectate, se mișcă încet spre partea de sus în cazul în care calendarele sunt și deschide o casetă de dialog div arătând spre 2 <input> câmpuri, după 3 secunde dispare
O mulțime a utilizatorii recomanda selectarea atât html și corpul tag-uri pentru compatibilitate cross-browser, astfel:
$('html, body').animate({ scrollTop: 0 }, callback);
Acest lucru poate declanșa dacă te're de numărare pe callback rulează doar o singură dată. Acesta va rula de două ori pentru că ai'am selectat două elemente.
Daca asta este o problema pentru tine, poti face ceva de genul asta:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
$('body').animate({ scrollTop: 0 }, callback);
}
Motivul acestei lucrări este în Chrome $('html').scrollTop()
întoarce 0, dar nu și în alte browsere, cum ar fi Firefox.
Dacă tu nu't doriți să așteptați pentru animație pentru a finaliza, în cazul în care bara de defilare este deja în partea de sus, încercați acest lucru:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
if ($('body').scrollTop()) {
$('body').animate({ scrollTop: 0 }, callback);
return;
}
callback();
}
$(".scrolltop").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
.section{
height:400px;
}
.section1{
background-color: #333;
}
.section2{
background-color: red;
}
.section3{
background-color: yellow;
}
.section4{
background-color: green;
}
.scrolltop{
position:fixed;
right:10px;
bottom:10px;
color:#fff;
}
<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>
</body>
</html>