Wie kann ich mit JavaScript an den Anfang der Seite blättern? Die Bildlaufleiste, die sofort an den Anfang der Seite springt, ist ebenfalls wünschenswert, da ich nicht auf einen reibungslosen Bildlauf aus bin.
Antworten
Zu viele Anzeigen?
Mehran Nasr
Punkte
121
Kamil Kiełczewski
Punkte
69048
Kürzeste
location='#'Diese Lösung ist eine Verbesserung der pollirrata-Antwort und haben einige Nachteile: kein flüssiges Scrollen und kein Wechsel der Seitenposition, aber es ist am kürzesten
Musaib Memdu
Punkte
71
Wenn der obere Bildlauf weniger als der untere Grenzwert beträgt und der untere Bildlauf nach oben erfolgt, ist die Kopfzeile klebrig. Siehe unten Fiddle Beispiel.
var lastScroll = 0;
$(document).ready(function($) {
$(window).scroll(function(){
setTimeout(function() {
var scroll = $(window).scrollTop();
if (scroll > lastScroll) {
$("header").removeClass("menu-sticky");
}
if (scroll == 0) {
$("header").removeClass("menu-sticky");
}
else if (scroll < lastScroll - 5) {
$("header").addClass("menu-sticky");
}
lastScroll = scroll;
},0);
});
});
Sedki Sghairi
Punkte
361
Ein einfaches Beispiel für "scroll to" (die Verwendung von HTML ist viel effizienter, aber hier wird gezeigt, wie man es mit JavaScript macht):
const btn = document.querySelector('.btn');
btn.addEventListener('click',()=>{
window.scrollTo({
left: 0,
top: 0,
})})
window.addEventListener('scroll', function() {
const scrollHeight = window.pageYOffset;
if (scrollHeight > 500) {
btn.classList.add('show-link');
} else {
btn.classList.remove('show-link');
}
});
.section {
padding-bottom: 5rem;
height: 90vh;
}
.btn {
position: fixed;
bottom: 3rem;
right: 3rem;
background: blue;
width: 2rem;
height: 2rem;
color: #fff;
visibility: hidden;
z-index: -100;
}
.show-link {
visibility: visible;
z-index: 100;
}
.title h2 {
text-align: center;
}
<section class="section">
<div class="title">
<h2>Section One</h2>
</div>
</section>
<section class="section">
<div class="title">
<h2>Section Two</h2>
</div>
</section>
<section class="section">
<div class="title">
<h2>Section Three</h2>
</div>
</section>
<a class="btn">
</a>
Priyanka
Punkte
31
