如何将滚动功能添加到我的导航栏？

我试图让我的导航按钮在单击时根据需要滚动到部分页面。我怎样才能做到这一点？如何将滚动功能添加到我的导航栏？

.topnav { 
 
    background-color: #333; 
 
    overflow: hidden; 
 
} 
 

 
.topnav a { 
 
    float: right; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 20px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
.profile-id { 
 
    position: center; 
 
} 
 

 
form { 
 
    display: inline; 
 
}

<link href='//fonts.googleapis.com/css?family=Bungee Inline' rel='stylesheet'> 
 

 
<div class="topnav" id="myTopnav"> 
 
    <a href="#home">Home</a> 
 
    <a href="#projects">Projects</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 
</div> 
 

 
<header> 
 
    <p style="text-align: center; font-size: 48pt; margin-top: 3%;"> New Wave Design Studios</p> 
 
</header> 
 

 
<style> 
 
    body { 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    font-family: 'Bungee Inline'; 
 
    background-image: url(https://arielle.com.au/wp-content/uploads/2016/04/wave-photography-dark-2.jpg), url(http://imageshack.com/a/img922/4958/Ca6YSO.jpg), url(http://imageshack.com/a/img923/1588/duLIdx.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center top, 100% 300px, 0% 870px; 
 
    background-size: 100% 380px, 40%, 42%; 
 
    } 
 
</style> 
 

 
<p style="margin: 10% 50% 10% 5%; font-size: 14pt; text-align: justified;"> NWDS set up shop in sunny So-Flo. The company was set up with the intention of coding an array of projects to prepare a strong, diverse portfolio for it's founder: Armando F III. With the knowledge from the FreeCodeCamp curriculum and a degree in software 
 
    development, Armando hopes to build NWDS and make a breakout appearence in the software scene. 
 
    <br></br> 
 
    @JadeCoder 
 
</p> 
 

 
<p style="margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;"> You can contact Armando through his freelance portfolio on Upwork by clicking 
 
    <a href="https://www.upwork.com/fl/armandofrias" target="_blank">Here.</a> 
 
</p> 
 

 
<p style="text-align: center; font-size: 14pt;"> <u>Projects</u> </p> 
 

 
<a href="http://workinprogress.agency/" target="_blank"> 
 
    <img src="https://imagizer.imageshack.us/v2/424x283q90/922/l43R2Y.jpg" alt="Nuclear Plant" align="left" style="margin-left: 150px; margin-top: 25px" height="300px" width="400px"> 
 
</a> 
 

 
<a href="http://workinprogress.agency/" target="_blank"> 
 
    <img src="https://imagizer.imageshack.us/v2/1020x680q90/924/2VMA4f.jpg" alt="SpaceX Launch" align: "center" style="margin-left: 150px; margin-top: 25px" height="300px" width="500px"> 
 
</a> 
 

 
<a href="http://workinprogress.agency/" target="_blank"> 
 
    <img src="https://imagizer.imageshack.us/v2/275x183q90/923/KfsrjN.jpg" alt="Code" align: "right" style="margin-left: 150px; margin-top: 25px" height="300px" width="400px"> 
 
</a>

来源

2017-07-06 Armando Frias

我总是用我自己的剧本，我希望这对你的作品。

确保包括jQuery的在你的<head>标签是这样的：

HTML：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

的JavaScript：

$(function() { 
    $('a[href*="#"]:not([href="#"])').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       $('html, body').animate({ 
        scrollTop: target.offset().top - $('.header').outerHeight(true) 
       }, 1000); 
      } 
     } 
     return false; 
    }); 
});

这样做，这样，您仍然可以控制，如果用户（比方说）会发生什么卷轴：

$(function() { 

    // previous code 

    $(window).on('touchmove wheel mousewheel', function(e) { 
     if (e.type == "wheel" || e.type == "touchmove") { 
      $('html, body').stop(); 
     } 
    }); 
});

这样，每当用户启动手动滚动（而动画仍在运行）动画将停止。

来源

2017-07-06 18:06:18

如何将滚动功能添加到我的导航栏？

回答

相关问题