同じページ内のクラスをリンクするにはどうすればいいですか

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で

は自分のページにリンクして

全例ページごとに一意でなければなりませんので、リンクそれはIDを持つ作品 の後ろに＃を置く：あなたはこの

で行うことができます

<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); 
     } 
    }); 
}) 

210しかし、他の人が示唆しているとして、私はあなただけのクラスを使用することができ、その場合には、この目的の

Answer 4

代替のjQueryを使用することであろう、のIDを利用し推薦します。これはスムーズなスクロールのようなより良い効果が必要な場合に便利ですが、ページごとに1回しか実装しないでください。

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

送信元のクラスと宛先のクラスにスクロールするdivをリンクします。その後、これらはウェブサイトの別の部分で繰り返すことができます（同じページではありません）。

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>

あなたは私の上記のスニペットを確認していただけますか？