Dieser Artikel enthält hauptsächlich ein Beispiel für die Implementierung des Ankerpunkt-Down-Scrolling-Effekts durch jQuery. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Implementierungseffekt:
Implementierungsprinzip:
Verwenden Sie jQuery animate() Methode zum Erzielen eines reibungslosen Scrolleffekts auf der Seite
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});Einfacher Beispielcode:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
<style>
body, html, .main {
height: 100%;
}
section {
min-height: 100%;
}
</style>
</head>
<body>
<a href="#section2" rel="external nofollow" style="
font-size: 30px;
font-weight: bold;
text-align: center;
">点击此处平滑滚动到第二部分</a>
<p class="main">
<section></section>
</p>
<p class="main" id="section2">
<section style="
background-color: #03c03c;
color: #fff;
font-size: 30px;
text-align: center">
SECTION 2
</section>
</p>
</body>
</html>Verwandte Empfehlungen:
AngularJS-Code für nahtloses Auf- und Abscrollen von Text
CSS3+JQUERY-Seitenscrolleffekt code_html/css_WEB-ITnose
Das obige ist der detaillierte Inhalt vonDetaillierte Code-Erklärung: jQuery implementiert den Ankerpunkt-Down-Scroll-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
