jQuery实现锚点向下平滑滚动特效实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效$('html, body').animate({scrollTop: $(hash).offset().top}, 800, funct ...
jQuery实现锚点向下平滑滚动特效
实现效果:
实现原理:
使用jQuery animate()方法实现页面平滑滚动特效
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
简单实例代码:
<!DOCTYPE html><html><head><script src='/images/loading.gif' data-original="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" >点击此处平滑滚动到第二部分</a><div > <section></section></div><div id="section2"> <section > SECTION 2 </section></div></body></html>
原标题:【前端】jQuery实现锚点向下平滑滚动特效
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。