滑动锚点+div+js

最新推荐文章于 2023-02-06 21:15:17 发布

fly5520

最新推荐文章于 2023-02-06 21:15:17 发布

阅读量454

点赞数

分类专栏： jquery特效文章标签： DIV+CSS div+css jquery滑动锚点滑动锚点

本文链接：https://blog.csdn.net/flyzq0525/article/details/8556026

版权

jquery特效专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html> 
 
  <html xmlns= 
  "http://www.w3.org/1999/xhtml" 
  > 
 
  <head runat= 
  "server" 
  > 
 
  <meta http-equiv= 
  "Content-Type" 
  content= 
  "text/html; charset=utf-8" 
  /> 
 
  <title>滑动锚点</title>     
 
  <script type= 
  "text/javascript" 
  src= 
  "/js/jquery-1.7.1.min.js" 
  ></script> 
 
  </head> 
 
  <body> 
 
  <form id= 
  "form1" 
  runat= 
  "server" 
  > 
 
  <!--head--> 
 
  <div class= 
  "head" 
  > 
 
  <div class= 
  "container" 
  > 
 
  <a href= 
  "#" 
  > 
 
  <div class= 
  "logo" 
  ></div> 
 
  </a>               
 
  <ul id= 
  "navbar" 
  class= 
  "nav" 
  > 
 
  <li class= 
  "active" 
  ><a href= 
  "#home" 
  >页首</a></li> 
 
  <li><a href= 
  "#features" 
  >特色功能</a></li> 
 
  <li><a href= 
  "#newFeatures" 
  >新功能</a></li> 
 
  <li><a href= 
  "#support" 
  >服务</a></li> 
 
  </ul> 
 
  </div> 
 
  </div> 
 
  <!--banner--> 
 
  <div id= 
  "home" 
  class= 
  "banner" 
  > 
 
  <div class= 
  "img" 
  ></div> 
 
  </div> 
 
  <!--content--> 
 
  <div id= 
  "features" 
  > 
 
  <br/><br/><br/><br/><br/><br/><br/><br/>            
 
  </div> 
 
  <div id= 
  "support" 
  > 
 
  <br/><br/><br/><br/><br/><br/> 
 
  </div>        
 
  <script>            
 
  $( 
  function 
  () { 
 
  $( 
  '#navbar a' 
  ).click( 
  function 
  () { 
 
  var 
  elementClicked = $( 
  this 
  ).attr( 
  "href" 
  ); 
 
  var 
  destination = $(elementClicked).offset().top; 
 
  $( 
  "html:not(:animated),body:not(:animated)" 
  ).animate({ scrollTop: destination - 65 }, 500); 
 
  return 
  false 
  ; 
 
  }); 
 
  $(window).scroll( 
  function 
  () { 
 
  var 
  preTop = document.documentElement.clientHeight; 
 
  $.each($( 
  '#navbar a' 
  ), 
  function 
  () { 
 
  var 
  element = $( 
  this 
  ).attr( 
  "href" 
  ); 
 
  var 
  scrollTop = $( 
  this 
  ).offset().top; 
  //div滚动高度  
 
  var 
  height = $(element).offset().top + $(element).height(); 
  //div高度 
 
  var 
  offsetTop = height - scrollTop; 
  //div卷上去可见区域高度 
 
  if 
  (offsetTop > 75) { 
 
  $( 
  this 
  ).parent( 
  'li' 
  ).addClass( 
  'active' 
  ).siblings( 
  'li' 
  ).removeClass( 
  'active' 
  ); 
 
  return 
  false 
  ; 
 
  } 
 
  }); 
 
  }); 
 
  }); 
 
  function 
  skip(data) { 
 
  $( 
  '#support dl' 
  ).each( 
  function 
  (index, element) { 
 
  if 
  (index == data) { 
 
  var 
  offsetTop = $(element).offset().top; 
 
  $( 
  "html:not(:animated),body:not(:animated)" 
  ).animate({ scrollTop: offsetTop - 75 }, 500); 
 
  return 
  false 
  ; 
 
  } 
 
  }); 
 
  } 
 
  </script> 
 
  </form> 
 
  </body> 
 
  </html> 
 
  注：需要引用js文件（<script type="text/javascript"src="/js/jquery-1.7.1.min.js"></script>） 
 
  js脚本中75标示菜单栏的高度，减去75标示滑动到这个位置就停止