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
Awesome feature dude
Thanks
Thank you !!
thank you!
Dude, amazing. I had been pulling my hair out with a different js solution to this problem and yours is so damn simple. Thanks for saving my hair!
Amazing!
Thanks for the handy script! Just wondering if you know how to add functionality that checks if the anchor point has already been scrolled to? For example, if the anchor point and the link that scrolls the screen to it are visible on the same page, when you click it, it jumps a little. Is there any way to fix this?
You could do something like that http://jsfiddle.net/zy9Wh/27/
Awesome!!! I’ve spent far too long looking for exactly this!
However, I have removed “javascript:void(0)” from my code to enable downgrading for devices with no JavaScript… Now I get a flash of image content I’m scrolling to…. Is there any way to code it so it can both downgrade and not have a flash?
Try using my plugin in the updated version…
Thank you. It worked with me.
Thank u .. very helpful and neat
Figured it out if anyone is looking to do the same. If you subtract from “offset().top” you can create some extra space.
This would do it…
________________
function goToByScroll(id){
$(‘html,body’).animate({scrollTop: $(“#”+id).offset().top-20},’slow’);
}
Thank you – worked great : )
*Does anyone know how I could add a top margin to the scrolled content to help give it some breathing room instead of being flush to the top of the browser window?
Very nice job on this. It implements well with my other javascript and jquery scripts and just ads that very nice professional touch to designs. Thanks a bunch.
thanks a lot.
i use this in our site.
awesome!
thanks a lot bro
I had got a dream to start my own business, but I did not have got enough of cash to do that. Thank heaven my fellow advised to utilize the credit loans. So I received the collateral loan and realized my old dream.
Just what I needed! Thanks
Thanks for this handy script. I have it set up to scroll to the top of a scrollable DIV. I had one issue with it. If the DIV was already scrolled to the top then clicking on the link to scroll to the top of the DIV actually scrolled the DIV down (if the DIV is not already scrolled to the top it does scroll right to the top), until I added top-250, and then it works wherever the DIV is scrolled to.
I am wondering about a couple of possibilities:
1. Is it possible to add an ease to the scroll?
2. Can the speed of the scroll be a function of the distance to scroll, as opposed to the duration?
Thanks
Nick
Thanks its help me a lot
Very najs site!! Glad u got it workin..
How do you get #ID links instead of onClick javascript links?
Content d’avoir aidé un compatriote :p
It’s was exactly my problem !
Have a look, it’s great now
http://www.chapiteau-etoilerouge.net/
Just figured it out 2 min after my post. Sorry. Solution ad -50 after .top
$(‘html,body’).animate({scrollTop: $(“#”+id).offset().top-50},’slow’);
Thanks!!
Hi, this is fantastic.
I have one question.
Is it possible to offset the top with ex 100px? I have a fixed header and now it scrolls nicely but ends under the header div.
Kind regards // Johan
Thanks so much!
Cheers dude, this is just what i was looking for, im going to stick that code in my snippets for reuse!
Many thanks
I modify the call:
load wait5sec and go
setTimeout(function(){goToByScroll(theIdIWantToGoTo)},5000);
This works in FF/IE8. I got the problem in IE7. Could you please help me out
Thanks so much!
I managed implemented the scrollTo onto a page im working on, And it works great. One problem – I have a down button and up button, and when testing on ipad, for going back to top, the page slides up to the top and straight back down quickly.
I Think maybe I have to unload the value somehow after each click — but unfortunately I dont know how?
Thanks so much! Awsome post! Just one thing, when I sepcify an ID it scrolls down to the id and then jumps back up? Anything I need to change?
Do you have a link ?
Thanks for the short code. And I’ve solved the Opera problem.
function goToByScroll(id) {
var op = jQuery.browser.opera ? jQuery(“html”) : jQuery(“html, body”);
op.animate({ scrollTop: jQuery(“#”+id).offset().top }, ‘slow’);
}
I’ve used “jQuery” instead of “$” to avoid to conflict and I’ve described it in this article:
http://www.codersgrave.com/jquery-ile-animasyonlu-basa-don-butonu/
Very cool. I just noticed MSNBC.com is animating their “jump to text” links that let you skip over the video and get to the written news story. It’s really a nice, elegant effect.
Thanks man!
U very helped me..!!
DUde! i\’ve been working on using other jquery plugins for hours and i couldn\’t get it to work, then i found your site and in two min i have it. THANK YOU.
Is there anyway to have the window slide to the div but with a marign?
I\’m having my window slide to an image header but i would like there to be a 50px margin above the header rather than right on top of it.
Please let me know!
god bless you,
thanx so much
Great job!, I was looking for this solution for month and I dont know how i got to this blog.
Thanks to share!
thanks, this is cool efect
Thanks! This is just where i was looking for.
And i think i’ll be running at the same problem with Blaise, anyone knows a solution.
Keep up the good work.
Is there a way to do this within only a DIV element with an ID? I see the JS says “html,body” but what if I want to only scroll a section of my site within a Div tag??
Works a treat…
Unfortunately, it seems to be conflicting with lightbox.
Can’t get them both to work on the same page.
I was so close!
Is there a fix?
Thanx
- Blaise
Thank you for this very compact and clean code.
Question, if I want to scroll slower than ‘slow’ is there a solution?
Thanks
Hej, thank you very much for this code, it is simple and easy to install. Just it doesn’t work well in Opera. When scroll to the top of the page it breaks.
Works perfect!!!!!!!!!!! Thanx so much!!!!!!!!!
im so new with this…. where should i put this code? within the head tag?
thanks.
I avoid installing “scrollTo” jQuery plugin (which is good but too much for what I needed =)
thanks! at least i can understand this tutorial
always share the code you write for your clients!
ABSOLUTELY BRILLIANT!! I have been looking for this for a long time!! Thank you soooo much!!
Glad to hear this ! Good luck
This code saved me, I’ll send you a link to the site I’m working on when its finished.