html 一页没有插件的滚动导航

Posted 2021-05-11

html, body { margin: 0; padding: 0; }
header { position: fixed; width: 100%; background-color: rgba(0,0,0,0.6); }
#desktop-nav ul { list-style: none; margin: 0; padding: 0; float: right; }
#desktop-nav ul li { display: inline-block; width: 150px; padding: 20px 0; text-align: center; }
#desktop-nav ul li a { color: #fff; text-decoration: none; text-transform: uppercase; }
#desktop-nav ul li a:hover { color: red; }
#desktop-nav ul li.active a { color: red; }
#home { width: 100%; height: 100vh; background-color: yellow; }
#about { width: 100%; height: 100vh; background-color: purple; }
#portfolio { width: 100%; height: 100vh; background-color: green; }
#contact { width: 100%; height: 100vh; background-color: orange; }

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

 // Highlight Menu Item on Scroll
    var lastId;
    var topMenu = $("#desktop-nav");
    var topMenuHeight = topMenu.outerHeight();
    var menuItems = topMenu.find("a");
    
    scrollItems = menuItems.map(function() {
        var item = $($(this).attr("href"));
        if (item.length) { 
          return item; 
        }
    });

    menuItems.click(function(e){
        var href = $(this).attr("href");
        var offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
        
        $('html, body').stop().animate({ 
        scrollTop: offsetTop
        }, 300);
        e.preventDefault();
        
    });

    $(window).scroll(function(){
        
       var fromTop = $(this).scrollTop()+topMenuHeight;
        
       var current = scrollItems.map(function(){
         if ($(this).offset().top <= fromTop)
           return this;
       });
        
       current = current[current.length-1];
       var id = current && current.length ? current[0].id : "";
       if (lastId !== id) {
           lastId = id;
           // Set/remove active class
           menuItems
             .parent().removeClass("active")
             .end().filter("[href='#"+id+"']").parent().addClass("active");
       }      
        
    });

One Page Scroll Nav Without Plugin
----------------------------------
A simple JQuery script to create a one page navigation and scrolling effect. User can click the navigation to jump to the specific section/page.

A [Pen](https://codepen.io/jksakura/pen/LkzAXz) by [Jake Zhong](https://codepen.io/jksakura) on [CodePen](https://codepen.io).

[License](https://codepen.io/jksakura/pen/LkzAXz/license).

<header>
  <nav id="desktop-nav">
    <ul>
      <li class="active"><a href="#home" class="page-scroll">Home</a></li>
      <li><a href="#about" class="page-scroll">About Us</a></li>
      <li><a href="#portfolio" class="page-scroll">Showcase</a></li>
      <li><a href="#contact" class="page-scroll">Contact Us</a></li>
    </ul>
  </nav>
</header>
<section id="home"></section>
<section id="about"></section>
<section id="portfolio"></section>
<section id="contact"></section>