Scroll to an element with jQuery
Assuming you have a button with the id button
, try this example:
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
});
});
</script>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
</html>
Smooth scroll to specific div on click
do:
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".second").offset().top},
'slow');
});
Updated Jsfiddle
Scroll to a specific position on a page using Javascript / Jquery
After much googling I found that you just need to do this:
location.hash = "elementId"
Smooth scroll to div id jQuery
You need to animate the html, body
DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});
scroll to specific element on page using jquery
UPDATE
Try this one, if you want a menu and menu links to specific page. It will scroll to your page with curtain effect.
DEMO http://jsfiddle.net/yeyene/mCytP/2/
Add menu
outside of ol
, then add links with your li page id in href.
<div id="menu">
<ul>
<li><a href="#home" class="curtain-links curtain-links-active">Home</a></li>
<li><a href="#about_us" class="curtain-links">About Us</a></li>
<li><a href="#portfolio" class="curtain-links">Portfolio</a></li>
<li><a href="#programs" class="curtain-links">Programs</a></li>
</ul>
</div>
Scroll to an element with jQuery
Assuming you have a button with the id button
, try this example:
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
});
});
</script>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
</html>
How to scroll to specific item using jQuery?
Dead simple. No plugins needed.
var $container = $('div'),
$scrollTo = $('#row_8');
$container.scrollTop(
$scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);
// Or you can animate the scrolling:
$container.animate({
scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});
Here is a working example.
Documentation for scrollTop
.
Scroll to the top of the page using JavaScript?
If you don't need the change to animate then you don't need to use any special plugins - I'd just use the native JavaScript window.scrollTo()
method -- passing in 0, 0
will scroll the page to the top left instantly.
window.scrollTo(xCoord, yCoord);
Parameters
- xCoord is the pixel along the horizontal axis.
- yCoord is the pixel along the vertical axis.
Related Topics
Opening New Window in HTML for Target="_Blank"
How to Do Page Numbering in Header/Footer HTMLs with Wkhtmltopdf
Why Does Reflow Need to Be Triggered for CSS Transitions
Simplest Way to Set Cursor to Wait, Then Have All Elements Revert Back
Changing Pseudo-Element Style from JavaScript
How to Check If an Element Exists in the Visible Dom
Google Chrome Console.Log() Inconsistency with Objects and Arrays
Putting Datepicker() on Dynamically Created Elements - Jquery/Jqueryui
HTML Button to Not Submit Form
Find Dom Element by Id When Id Contains Square Brackets
How to Set Textarea Scroll Bar to Bottom as a Default
Jquery - How to Disable the Entire Page
JavaScript Incapable of Getting Element's Max-Height via Element.Style.Maxheight
Call Angularjs from Legacy Code
Is There a Max Number of Arguments JavaScript Functions Can Accept