How can I link a class within the same page - html

Question

I have a div with a specific class name when a specific link is clicked I wanted to jump into the div. How can I achieve this?
HTML
<a class="my_link" href="#"> This is my link </a>
<div class="Home"> This is my target </div>
Thanks

Answer 1

you can do that with ids
<a class="my_link" href="#Home"> This is my link </a>
<div id="Home"> This is my target </div>
if you need you classes to stay:
<div class="Home" id="someId"> This is my target </div>
and just replace #Home in your link with #someId
just link to your page and put # behind the link
It works with Ids because the should be unique per page
Full example:
<a class="my_link" href="some-of-your-pages#Home"> This is my link </a>

Answer 2

You can do with this
<a class="my_link" href="#Home"> This is my link </a>
<div class="Home" id="Home"> This is my target </div>

Answer 3

$(".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>
Would you please check my above snippet?

Answer 4

try something like this, it utilizes jQuery, as an added bonus it has smooth scrolling
$(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);
}
});
})
But as others have suggested, i would recommend utilizing ids for this purpose

Answer 5

An alternative would be to use jQuery, in which case you can just use classes. This would be handy if you want a nicer effect like smooth scrolling, but you should only implement once per page.
$(".origin").click(function () {
$('html,body').animate({
scrollTop: $(".destination").offset().top
}, 'slow');
})
Just give the link the class of origin, and the div you want to scroll to the class of destination. Then these can be repeated in different parts of the website (not on same page).

Answer 6

Give name attribute for anchor tag just above your div and mention that name in the link 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>
I have attached some content so you can view the demo