When I click on a button i want to be able to jump down or scroll to a specific div or target on the page.
$('#clickMe').click(function() {
//jump to certain position or div or #target on the page
});
How can I do this?
This question is related to
javascript
jquery
html
css
scroll
I would style a link to look like a button, because that way there is a no-js fallback.
So this is how you could animate the jump using jquery. No-js fallback is a normal jump without animation.
Original example:
$(document).ready(function() {_x000D_
$(".jumper").on("click", function( e ) {_x000D_
_x000D_
e.preventDefault();_x000D_
_x000D_
$("body, html").animate({ _x000D_
scrollTop: $( $(this).attr('href') ).offset().top _x000D_
}, 600);_x000D_
_x000D_
});_x000D_
});
_x000D_
#long {_x000D_
height: 500px;_x000D_
background-color: blue;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<!-- Links that trigger the jumping -->_x000D_
<a class="jumper" href="#pliip">Pliip</a>_x000D_
<a class="jumper" href="#ploop">Ploop</a>_x000D_
<div id="long">...</div>_x000D_
<!-- Landing elements -->_x000D_
<div id="pliip">pliip</div>_x000D_
<div id="ploop">ploop</div>
_x000D_
New example with actual button styles for the links, just to prove a point.
Everything is essentially the same, except that I changed the class .jumper
to .button
and I added css styling to make the links look like buttons.
$("html, body").scrollTop($(element).offset().top); // <-- Also integer can be used
Source: Stackoverflow.com