你的位置:首页 > 软件开发 > Java > 【前端】jQuery实现锚点向下平滑滚动特效

【前端】jQuery实现锚点向下平滑滚动特效

发布时间:2017-08-29 00:00:07
jQuery实现锚点向下平滑滚动特效实现效果: 实现原理:  使用jQuery animate()方法实现页面平滑滚动特效$('html, body').animate({scrollTop: $(hash).offset().top}, 800, funct ...

【前端】jQuery实现锚点向下平滑滚动特效

jQuery实现锚点向下平滑滚动特效

实现效果:

【前端】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 (#换成@)。

可能感兴趣文章

我的浏览记录