如何鏈接同一頁面中的一個類

Question

當我點擊一個特定的鏈接時，我有一個具有特定類名的div我想跳進div。我怎樣才能做到這一點？

HTML

<a class="my_link" href="#"> This is my link </a> 

<div class="Home"> This is my target </div> 

感謝

Answer 1

你可以做到這一點與IDS

<a class="my_link" href="#Home"> This is my link </a> 

<div id="Home"> This is my target </div> 

如果您需要在班住宿：

<div class="Home" id="someId"> This is my target </div> 

，並只需更換#Home在你的鏈接與#someId

只是鏈接到你的網頁，並把＃鏈接 它與IDS的背後，因爲應該是每頁獨特

完整的示例：

<a class="my_link" href="some-of-your-pages#Home"> This is my link </a> 

Answer 2

你可以用這個

做

<a class="my_link" href="#Home"> This is my link </a> 

<div class="Home" id="Home"> This is my target </div> 

Answer 3

嘗試這樣的事情，它利用jQuery的，作爲一個額外的好處有平滑滾動

$(document).ready(function() { 
    $("a#smooth_scroll").on('click', function(event) { 
     var el = $(this) 
     var href = el.attr('href') // can be an id or a class 

     var nav_element_height = $(".navbar").outerHeight(); 
     var target = $(href); 
     var target_offset = target.offset().top; 

     var offset = Math.round(target_offset - nav_element_height); 

     if (target.length) { 
      event.preventDefault(); 
      $('html, body').stop().animate({ 
       scrollTop: offset 
      }, 1000); 
     } 
    }); 
}) 

但正如其他人的建議，我會建議利用IDS用於此目的

Answer 4

另一種方法是使用jQuery，在這種情況下，你可以使用類。如果你想得到像平滑滾動這樣更好的效果，這將會很方便，但是你應該只在每個頁面上執行一次。

$(".origin").click(function() { 
    $('html,body').animate({ 
     scrollTop: $(".destination").offset().top 
    }, 'slow'); 
}) 

只要給出鏈接的原始類別，並要滾動到目的地的類的股利。然後這些可以在網站的不同部分重複（不在同一頁面上）。

Answer 5

給name屬性只是你的div以上anchor標籤和鏈接href

<a class="my_link" href="#home"> This is my link </a> 


<a name="home"></a> 
<div class="Home"> This is my target </div> 

<a class="my_link" href="#home"> This is my link </a> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam, purus sed rutrum congue, mauris diam placerat nibh, id fringilla neque mi vel elit. Nulla aliquam mauris nisl. Ut sed interdum sapien, ac tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam eu convallis urna. Aliquam elit ipsum, tincidunt eget euismod eu, mattis feugiat magna. Sed congue mollis odio, at consequat enim interdum ac. Vestibulum iaculis, nisi a vulputate posuere, elit magna lacinia purus, sed lacinia mi massa ut neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc turpis est, tincidunt at semper quis, faucibus nec sapien. Integer dictum malesuada lectus ac luctus. Sed vestibulum justo sed dolor faucibus rutrum. Proin porta condimentum nisl id ullamcorper. Integer in ligula in libero consectetur pharetra. Nam turpis nibh, venenatis ac accumsan ac, posuere eu arcu. 
 

 
Nunc sagittis turpis quis laoreet volutpat. Donec facilisis, dui sit amet commodo porta, lorem ipsum consequat nulla, sit amet porta sem risus non sapien. Integer efficitur malesuada neque vel malesuada. Fusce non ante euismod, elementum urna tristique, molestie dolor. Nullam ipsum leo, pellentesque sit amet diam sed, lacinia bibendum magna. Maecenas ac congue dui, sit amet sagittis est. Nam eget est at tellus cursus tempus. 
 

 
</p> 
 
<a name="home"></a> 
 
<div class="Home"> This is my target </div> 
 
<p> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam, purus sed rutrum congue, mauris diam placerat nibh, id fringilla neque mi vel elit. Nulla aliquam mauris nisl. Ut sed interdum sapien, ac tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam eu convallis urna. Aliquam elit ipsum, tincidunt eget euismod eu, mattis feugiat magna. Sed congue mollis odio, at consequat enim interdum ac. Vestibulum iaculis, nisi a vulputate posuere, elit magna lacinia purus, sed lacinia mi massa ut neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc turpis est, tincidunt at semper quis, faucibus nec sapien. Integer dictum malesuada lectus ac luctus. Sed vestibulum justo sed dolo Nam sit amet ex pharetra, fermentum dolor quis, posuere tortor. Sed gravida ac justo vel efficitur. Nullam ut diam nec sem imperdiet rhoncus. Ut et nisl non nisl tempor cursus. Sed tincidunt, eros quis tristique congue, augue dolor faucibus dui, a porta arcu lectus quis diam. Aenean sagittis dui quis eros fringilla, non laoreet nibh elementum. Cras porta eget mi at placerat. Maecenas non condimentum massa, eget faucibus arcu. Curabitur vel velit non velit placerat lacinia sit amet sit amet purus. Mauris id condimentum risus, ut fermentum turpis. 
 
</p>

我已經附加了一些內容，因此您可以觀看演示提那個名字

Answer 6

$(".my_link").click(function() { 
 
    $('html,body').animate({ 
 
     scrollTop: $(".Home").offset().top}, 
 
     'slow'); 
 
});

.first { 
 
    width: 100%; 
 
    height: 1000px; 
 
    background: #ccc; 
 
} 
 

 
.Home { 
 
    width: 100%; 
 
    height: 1000px; 
 
    background: #999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="first"><a class="my_link" href="#"> This is my link </a> 
 
</div> 
 
<div class="Home"> This is my target </div>

請您檢查我的上面的代碼片段嗎？