Javascript实现导航锚点滚动效果实例

<!DOCTYPE html>
<html>

   <head>
       <meta charset="{CHARSET}">
       <title></title>
       <script src="jquery.1.8.3.html"></script>
       <style>
           .section{

               height:200px;
               100%;
           }
           #section1{
               background: red;
           }
           #section2{
               background: blue;
           }
           #section3{
               background: gold;
           }
           #section4{
               background: green;
           }
           #section5{
               background: cyan;
           }
           nav{ position: fixed; 100px; right: 10px; top: 20px;}
       </style>
   </head>

   <body>
       <p class="container">
           <p class="wrapper">
               <p class="section" >section5</a>
           </nav>
       </p>
   </body>
   <script>

//这个和下面代码可以选择一种
// var $navs = $('nav a'),          // 导航
//$sections = $('.section'),       // 模块
//$window = $(window),
//navLength = $navs.length - 1;
//
//$window.on('scroll', function() {
//var scrollTop = $window.scrollTop(),
// len = navLength;
//
//for (; len > -1; len--) {
// var that = $sections.eq(len);
// if (scrollTop >= that.offset().top) {
//     $navs.removeClass('current').eq(len).addClass('current');
//     break;
// }
//}

$navs.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
    'scrollTop': $($(this).attr('href')).offset().top
}, 400);
});
   </script>

</html>

Javascript实现导航锚点滚动效果实例

相关推荐