A do-it yourself blog
Animated scroll to anchor/id function with jQuery
Update : Post update here
Today I had to make a function for a client of mine so I decided to share it with you.
It’s a oneliner but can add a really nice effect to your website.
This function requires jQuery
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
Of course you can change slow to normal or fast or even a int in milliseconds.
And to call it
<script>
goToByScroll("theIdIWantToGoTo");
</script>
Enjoy
Very nice code! Appreciate it! Using it too!
Thanks for this one, saves me a couple of hours.
I was implementing this on a magento site, and it works perfectly as intended.
Thanks,
spawnthing
This works great. But how to use this if on my page i want to scroll inside a table and not the whole page….please help…
Thanks in advance!!
Hi,
nice work, but unfortunately I don’t think this implementation will work for me, I have a form on a page and I need the page to scroll down to the form( bottom page) after user clicks submit. I tried;
$(document).ready(function () {
$(‘#the submit button/ or an I have the form id’).click(function (evt) {
goToByScroll(“theIdIWantToGoTo/or can have a class”);
});
Thanx in advance.
this should work if your form is not actually submitted.
well my form is submitted, the problem I want to solve is to have the page after clicking the submit button to scroll down the form/or stay on the same form so users can see the displayed messages on the form (success or errors).
You can do it using this technique, just have to be a little clever
i haven’t got much experience in javascript but will have a go
ok no solutions so far, is there a way to make events fire one after the other i.e submit then the page scroll down event?
I have to unsubscribe to this, by the way, I solved my problem, can’t believe it was so simple!
Great great post. I modified the function to create a horizontal version that scrolls from left to right, and it looks wonderful as a powerpoint-like presentations. http://ysteven.com/art-design-illustration/presentations-w-jquery-horizontal-scrolling/
Works like a charm and so easy to implement…thanks!!!
fantastic – thanks for this! saved me a load of research!
Does this go inside a script tag within the head tag?
function goToByScroll(id){
$(‘html,body’).animate({scrollTop: $(“#”+id).offset().top},’slow’);
}
Also -does this;
goToByScroll(“theIdIWantToGoTo”);
Go inside a script/javeScript tag within the head tag, within the anchor div, or at the bottom within the body tag?
I think it goes inside a form like this:
I know that I should know all this even though I have done a lot in PHP within HTML, I have done very little javascript and even less Jquery
I think it goes inside a form like this:
After much, much grief I finally figured the above out. It helped me when I found the “above link” to the demo-code, which is not in plain view to us newbies
Anyway, this post may be up for years so, in order to answer this for all future newbies, I have written full instructions below. I hope you can quickly understand all of them…
Scroll to Element_By_ ID using Jquery and a Form “submit” button
You’ll need to do 4-things
1) Place jquery inside a jqury foulder and upload it to your server, then place a call to it inside your ‹head› tags. (likr this)
‹script type=”text/javascript” src=”YourJqueryFoulderName/jquery.js”›‹/script›
remember to place this above the below function-call
2) Place this js-function-code ‹script›‹/script› tags within your ‹head› or place it inside a js file.js and upload the file to your server. (see below js-function-code)
‹script›
function goToByScroll(id){
$(‘html,body’).animate({scrollTop: $(“#”+id).offset().top},’slow’);
}
‹script/›
If you place the function inside a js_file.js use a javascript call to access it. (like this)
‹script type=”text/javascript” src=”Your_file.js_FoulderName/Your_js_FileName.js”›‹/script›
3) Call the above function within the ‹body› tag. (like this)
‹body ‹? if($EleName › 0){?›onload=”goToByScroll(‹?php echo $EleName?›)”‹? }?››
4) using div tags place your Form tags outside the div tags like this
‹form›‹div id=”10″›Your form input here‹/div›‹/form›
be sure to place an hidden input tag inside your form (like this)
‹input name=”divEleTest” type=”hidden” value=”10″ /›
and remember to set the $EleName PHP var
$EleName = (isset($_POST["divEleTest"]))?$_POST["divEleTest"]:”";
on the post, so the body-tag call, to the function, will send the right ID. The body-tag will
not make the call to the function if $EleName is not set of if it = zero (0).
Note that the Ele-ID name does not have to be a number.
Hope this helps all who need it.
Because of my lack of knowledge in JavaScript -I had to spent a lot of time learning this because most folks who post this kind of stuff wants us to know the basics -like where to place each section of the code and which tags to use when placing them.
Doug
give me to the end of Jan 2012 and you can visit my site to see how this work at ladollarsaver.com
Great article. I was looking for a solution for this for a few hours and this was by far the easiest. Thanks.
Hey guys, I see that there is an offset option here, does this mean that you can offset the scroll by a certain amount of pixels? If so, how do I go about this? I have a floating navigation over my site design and the scroll to the exact top is not work exactly how I envisioned – can anybody help – super noob with jQuery.
Lets say your navigation is 60px high then this should work :
function goToByScroll(id){
$(‘html,body’).animate({scrollTop: $(“#”+id).offset().top – 60},’slow’);
}
Change the 60 to whatever you want.
That works perfect see it live at http://www.sealpak.net/services.html
Thanks simple and gud function , used at BTscene (refresh link)
Thanks for this. Nice clean and simple solution.
Si
Works great, thanks
Great simple script, couldn’t be easier. Thanks a lot!!!
THANK YOU VERY MUCH!!
Brilliant, thank you
works REALLY great with the easing plugin too by the way
this saved my life!!!!!! i almost wanted to punch myself in the face working on this stupid project but this works like a gem!!!! many thanks!
Very nice, simple and functioning.
Thanks mate, working just perfect.
Nice and thoughtful of you….
Most appreciated
Works like a charm! Thank you for that, this is much smaller than the .scrollTo-Plugin!
Hi, this is great. I was wondering if it’s possible to slide to the right? If yes, can you post the code. I’m a beginner, and it’s hard for me write the code.
Thanks in Advance.
wow this is amazing, thank you so much, huge time saver!