zoukankan      html  css  js  c++  java
  • 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" id="section1">section1</p>
                    <p class="section" id="section2">section2</p>
                    <p class="section" id="section3">section3</p>
                    <p class="section" id="section4">section4</p>
                    <p class="section" id="section5">section5</p>
                </p>
                <nav>
                    <a href="#section1" rel="external nofollow" class="current">section1</a>
                    <a href="#section2" rel="external nofollow">section2</a>
                    <a href="#section3" rel="external nofollow">section3</a>
                    <a href="#section4" rel="external nofollow">section4</a>
                    <a href="#section5" rel="external nofollow">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>

  • 相关阅读:
    【BZOJ4009】[HNOI2015]接水果 DFS序+整体二分+扫描线+树状数组
    【BZOJ4010】[HNOI2015]菜肴制作 拓扑排序
    【BZOJ4028】[HEOI2015]公约数数列 分块
    有道云笔记配合MPic+七牛云 自制MarkDown文档图床(适用Typora)
    Python面试题之Python反射机制
    Python爬虫学习笔记之爬虫基础库
    Django学习笔记之Django Form表单详解
    Django学习笔记之Django的url反向解析
    SQL学习笔记之SQL中INNER、LEFT、RIGHT JOIN的区别和用法详解
    SQL学习笔记之MySQL中真假“utf8” 问题
  • 原文地址:https://www.cnblogs.com/gerry/p/7519428.html
Copyright © 2011-2022 走看看