HTMLスクロールメニュー

-3

私は以下のようなメニューを持っています。アイテム間をスクロールしたいHTMLスクロールメニュー

<div id="menu"> 
    <ul> 
    <li><a href="#">Foods</a></li> 
    <li><a href="#">Drinks</a></li> 
    </ul> 
</div>

ありがとうございます！

出典

2017-12-14 Alison

スタックオーバーフローがコードの書き込みサービスではありませんので、私は、オフトピックとして、この質問を閉じるために投票しています。それで、あなたは自分でコードを書こうとします**。 ** [もっと研究をして]（// meta.stackoverflow.com/questions/261592)**あなたが問題を抱えていると、あなたが試みたものを投稿することができます**問題**の中に** [最小、完全、および検証可能な例]（// stackoverflow.com/help/mcve)**を提供します。 – Rob

チェックアウト。これはあなたのための良い出発点かもしれません。それはブートストラップとjQueryの使用に関するものです。

別の解決策は、HTML DOM scrollIntoView方法を使用している：私のcaseitで

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <style> 
 
      #myDIV { 
 
       height: 250px; 
 
       width: 450px; 
 
       overflow: auto; 
 
       background: green; 
 
      } 
 
      #myDIVTwo { 
 
       height: 250px; 
 
       width: 450px; 
 
       overflow: auto; 
 
       background: blue; 
 
      } 
 
      #Food { 
 
       margin:500px; 
 
       height: 800px; 
 
       width: 2000px; 
 
       background-color: coral; 
 
      } 
 
      #Drinks { 
 
       margin:500px; 
 
       height: 800px; 
 
       width: 2000px; 
 
       background-color: red; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 

 
     <p>Click the button to scroll to the top of the element with id="content".</p> 
 
     <ul> 
 
      <li><a href="#home" onclick="myFunction()">Food </a></li> 
 
      <li><a href="#home" onclick="myFunctionTwo()">Drinks </a></li> 
 
     </ul> 
 
     <div id="myDIV"> 
 
      <div id="Food"> 
 
       Some text inside an element. this is the food section 
 
      </div> 
 
     </div> 
 
     <div id="myDIVTwo"> 
 
      <div id="Drinks"> 
 
       Some text inside an element. this is the Drinks section 
 
      </div> 
 
     </div> 
 
     <script> 
 
      function myFunction() { 
 
       var elmnt = document.getElementById("Food"); 
 
       elmnt.scrollIntoView(); 
 
      } 
 
      function myFunctionTwo() { 
 
       var elmntTwo = document.getElementById("Drinks"); 
 
       elmntTwo.scrollIntoView(); 
 
      } 
 
     </script> 
 
    </body> 
 
</html>

出典

2017-12-14 15:24:13

リンクのみの回答は許可されていません。これを削除するか、独自の回答を作成してください。 https://stackoverflow.com/help/how-to-answer – Rob

申し訳ありませんが私は編集することを知らなかった、私は単に正しい方向にユーザーを指すようにしたい、私は外部リンクを追加して教えて、okst私のmisstake –

しかし、どのようにメニュー項目に関数を追加することはできますか？ – Alison

これを実現するには、HTML要素のIDを使用します。

<div id="menu"> 
    <ul> 
    <li><a href="#placeIWantToJump">Foods</a></li> 
    <li><a href="#">Drinks</a></li> 
    </ul> 
</div> 

... 

<div id="placeIWantToJump"> ... </div>

出典

2017-12-14 15:11:18 nipunasudha

私はそれをしようとしましたが、エラーメッセージが表示されます：ファイルが見つかりませんでした – Alison

'href'にプレフィックス＃を入れましたか？例を注意深く見てください。 – nipunasudha

は、メニュー経由でスムーズにスクロールされます。^_-これを試してみてください：

$("body").on('click', '[href*="#"]', function(e){ 
 
    var fixed_offset = 100; 
 
    $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000); 
 
    e.preventDefault(); 
 
});

#foods_section{ 
 
    margin-top:500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
    <ul> 
 
    <li><a href="#foods_section">Foods</a></li> 
 
    <li><a href="#">Drinks</a></li> 
 
    </ul> 
 
</div> 
 
<div id="foods_section">Simple text</div>

出典

2017-12-14 15:30:42

答えて

関連する問題