如何使用jQuery跳轉到頁面中的術語？

Question

HyperText Markup 
<span style="background-color:#E06685;" name="31245">
  <b>Language</b>
</span>
, commonly referred to as HTML, is the standard markup 
<span style="background-color:#E06685;" name="31245">
  <b>language</b>
</span>
used to create 
<span name="41245" style="color:#027a00;font-weight:bold">
  web
</span>
pages.[1] 
<span name="41245" style="color:#027a00;font-weight:bold">
  Web
</span>
browsers can read HTML files and render them into visible or audible 
<span name="41245" style="color:#027a00;font-weight:bold">
  web
</span>
pages.

這是html頁面中的一些文本，並且該頁面具有一些具有name屬性的span標簽。name屬性對於特定術語的所有出現都具有相同的值。 在上面的文本中，我們將span命名為'31245'對應於'language'單詞，並將'41245'對應於'web'。在同一頁面中，我們有一個下拉列表，顯示了span標簽的所有唯一單詞。 用戶可以從dorpdown中選擇一個單詞，並可以通過使用next按鈕導航到html頁面中所選單詞的出現。 例如，這類似於PDF中的搜索功能（Ctrl + F）。 有人可以告訴我如何實施嗎？

謝謝！

Answer 1

在您的href鏈接中輸入websiteurl +“＃[id]”

這將跳轉到您放置該ID的元素的[id]。

示范

 <a href="#lorem1">Go to Lorem #1</a> <br/> <a href="#lorem2">Go to Lorem #2</a> <br/> <a href="#lorem3">Go to Lorem #3</a> <br/> <div> <h3 id="lorem1"><b>Lorem Paragraph #1</b></h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a tortor vulputate ante ultricies sodales pretium quis augue. Suspendisse quis enim dignissim, pretium elit sit amet, vestibulum elit. Etiam non consectetur ante, sed volutpat mauris. Fusce vestibulum orci ligula, sit amet dapibus quam laoreet id. Aenean dignissim, felis quis consectetur rhoncus, est quam volutpat ex, at interdum nisi ligula ac arcu. Suspendisse potenti. Aenean tincidunt maximus nisl, vel congue ipsum viverra vel. Suspendisse eget magna eu purus sagittis luctus. Maecenas eleifend at neque at ullamcorper. Nullam semper elit augue, eu pretium tortor congue quis. Morbi gravida semper odio. Duis faucibus ut eros nec suscipit. Proin diam nibh, efficitur at efficitur nec, posuere id lacus. Quisque vel tortor vehicula, efficitur mi eget, volutpat nunc. Aenean porta orci at malesuada luctus. </div> <br/> <br/> <br/> <div> <h3 id="lorem2"><b>Lorem Paragraph #2</b></h3> In hac habitasse platea dictumst. Nulla sem magna, cursus in elementum in, ultricies vel velit. Mauris lacinia maximus metus sit amet iaculis. Fusce sed magna tempus, semper ligula ornare, sodales nisl. Vestibulum id neque ut erat pharetra mattis eu sit amet nibh. Vivamus ornare justo semper mi fringilla feugiat. Donec ultrices velit dui, a mollis sapien suscipit id. Maecenas congue urna vel justo pulvinar lacinia. Nam non diam commodo, ultricies nulla molestie, dapibus mi. Fusce in lacus sem. Donec nisl enim, ullamcorper sit amet rutrum vulputate, pretium at sapien. Nullam vitae tincidunt sapien, sed sollicitudin magna. </div> <br/> <br/> <br/> <div> <h3 id="lorem3"><b>Lorem Paragraph #3</b></h3> Donec tempor ullamcorper quam, eu fringilla diam egestas ut. Etiam eros purus, scelerisque vitae elit id, consectetur congue magna. Etiam in neque quis mauris scelerisque efficitur. Cras et sapien justo. Nam sed ligula metus. Vestibulum gravida eros id mi dapibus dapibus. Aliquam lectus dolor, pulvinar vel magna et, rutrum vehicula ante. Pellentesque nisi ipsum, sodales nec dolor id, sodales varius magna. Donec feugiat placerat egestas. Morbi quis magna nec velit auctor bibendum. Vivamus metus magna, pellentesque sit amet est ut, dapibus hendrerit risus. Proin vel nulla lacus. Proin lacinia felis sit amet augue dictum, sit amet aliquam velit posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ac justo justo. </div> 

Answer 2

您可以有效，動態地進行制作...

 $(document).ready(function() { $(".menu").on("click",function(event) { if ($(".toggleMenu").hasClass('active')) { $(".toggleMenu").click(); } $('html,body').animate({ scrollTop: $(this.hash).offset().top}, 500); }); $(".chosen-select").chosen(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <header> <nav> <ul> <li> <a href="#div1" class="menu">First</a></li> <li> <a href="#div2" class="menu">Second</a></li> <li> <a href="#div3" class="menu">Third</a></li> <li> <a href="#div4" class="menu">Forth</a></li> </ul> </nav> </header> <section style="height:150px;width:100%;" id="div1"> <h2 style="text-center">First Div</h2> </section> <section style="height:150px;width:100%;" id="div2"> <h2 style="text-center">Second Div</h2> </section> <section style="height:150px;width:100%;" id="div3"> <h2 style="text-center">Third Div</h2> </section> <section style="height:150px;width:100%;" id="div4"> <h2 style="text-center">Forth Div</h2> </section>