スクロール機能をナビゲーションバーに追加するにはどうすればよいですか？

私は、ナビゲーションボタンをクリックして必要に応じてページの一部にスクロールさせようとしています。これどうやってするの？私はいつも自分のスクリプトを使用しスクロール機能をナビゲーションバーに追加するにはどうすればよいですか？

.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

、私はこれがあなたのために働く願っています。

は、このようなあなたの<head>タグでのjQueryを必ず含めてください：

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

スクロール機能をナビゲーションバーに追加するにはどうすればよいですか？

答えて

関連する問題