How to scroll to an element in jQuery?

Question

I have done the following code in JavaScript to put focus on the particular element (branch1 is a element),

document.location.href="#branch1";

But as I am also using jQuery in my web app, so I want to do the above code in jQuery. I have tried but don't know why its not working,

$("#branch1").focus();

The above jquery (focus()) code is not working for div, whereas If i am trying the same code with textbox, then its working,

Please tell me, how can I put focus on a div elemnt using jQuery?

Thanks!

score 119 · Answer 1 · edited Jan 31 '14 at 08:11

119

For my problem this code worked, I had to navigate to an anchor tag on page load :

$(window).scrollTop($('a#captchaAnchor').position().top);

For that matter you can use this on any element, not just an anchor tag.

edited Jan 31 '14 at 08:11

Marc Uberstein

12,501
3
44
72

answered Mar 13 '10 at 21:47

Banning

2,279
2
16
20

8

Instead of "$(this).scrollTop" you should use "$(window).scrollTop". The first only workings when "this" happens to be the same as "window". – fresskoma Nov 17 '10 at 12:12

score 52 · Answer 2 · answered Jul 04 '10 at 00:52

52

Like @user293153 I only just discovered this question and it didn't seem to be answered correctly.

His answer was best. But you can also animate to the element as well.

$('html, body').animate({ scrollTop: $("#some_element").offset().top }, 500);

answered Jul 04 '10 at 00:52

User123342234

1,455
14
17

3

if you are using it inside a .live('click') and you notice the window jumps to the top of the page, add a "return false" as the last statement, it solves the problem for IE and Chrome :D – max4ever Jun 13 '11 at 09:08
awesome. it doesnt' need a plugin. – dynamic May 19 '12 at 09:28
2

Note that though it seems "html" would be unneeded in the selector, Firefox won't do the scroll without it. So $('html, body') works, $('body') does not (FF only, in IE and Chrome it works fine). – eon Mar 19 '15 at 17:10

score 40 · Answer 3 · edited Nov 14 '11 at 15:42

40

You can extend jQuery functionalities like this:

jQuery.fn.extend({
scrollToMe: function () {
    var x = jQuery(this).offset().top - 100;
    jQuery('html,body').animate({scrollTop: x}, 500);
}});

and then:

$('...').scrollToMe();

easy ;-)

edited Nov 14 '11 at 15:42

Lukas Eder

211,314
129
689
1,509

answered Sep 23 '11 at 15:26

MCurbelo

4,097
2
26
21

That's the nicest solution, I think. Just add it once, and then forget about it... :-) – Lukas Eder Nov 14 '11 at 15:49
Very nice solution. This type of solution will go beyond the OP question and abbreviate a bunch of my code. – Just a guy Jan 05 '12 at 18:20
@Oudin I know this is slow to respond, but replace `'html,body'` with `'.scrollable-container'` and then add `scrollable-container' to the list of classes on your div. You could also add a parameter to `scrollToMe` which takes any specific selector you want to be the parent instead. – Mike Atlas Oct 09 '13 at 23:38
thanks thats an excellent answer. I didnt need the animation, so I just did ```scrollToMe: function () { var x = jQuery(this).offset().top - 100; $('html').scrollTop(x); }}); ``` – Maks Feb 21 '14 at 00:38
Thanks, well done. I extended this to handle scrolling objects in a scrolling window. jQuery.fn.extend({ scrollToMe: function (e) { if (typeof(e)=='undefined'){ e='html,body'; } var y = jQuery(this).offset().top; jQuery(e).animate({scrollTop: y}, 500); } }); – pgee70 Nov 11 '14 at 10:18
this is the best solution – Firas Nizam Sep 23 '18 at 10:09

score 32 · Accepted Answer · edited Apr 24 '15 at 16:47

32

Check jQuery.ScrollTo, I think that's the behavior that you want, check the demo.

edited Apr 24 '15 at 16:47

JDB

25,172
5
72
123

answered Feb 01 '09 at 06:50

Christian C. Salvadó

807,428
183
922
838

2

This answer pops up first Google. As of the new jQuery renovations, the new, correct URL is http://plugins.jquery.com/scrollto/ – Zmart Aug 22 '13 at 17:35
2

Even that address is outdated now. Author's Github repo is at https://github.com/flesler/jquery.scrollTo – geekuality Jan 13 '15 at 09:20
3

Link out of date and not really jQuery, but a jQuery plugin. – Piotr Kula Mar 30 '15 at 09:10

score 4 · Answer 5 · answered Jan 21 '13 at 17:07

Check out jquery-scrollintoview.

ScrollTo is fine, but oftentimes you just want to make sure a UI element is visible, not necessarily at the top. ScrollTo doesn't help you with this. From scrollintoview's README:

How does this plugin solve the user experience issue

This plugin scrolls a particular element into view similar to browser built-in functionality (DOM's scrollIntoView() function), but works differently (and arguably more user friendly):

it only scrolls to element when element is actually out of view; if element is in view (anywhere in visible document area), no scrolling will be performed;

it scrolls using animation effects; when scrolling is performed users know exactly they're not redirected anywhere, but actually see that they're simply moved somewhere else within the same page (as well as in which direction they moved);

there's always the smallest amount of scrolling being applied; when element is above the visible document area it will be scrolled to the top of visible area; when element is below the visible are it will be scrolled to the bottom of visible area; this is the most consistent way of scrolling - when scrolling would always be to top it sometimes couldn't scroll an element to top when it was close to the bottom of scrollable container (thus scrolling would be unpredictable);

when element's size exceeds the size of visible document area its top-left corner is the one that will be scrolled to;

score 4 · Answer 6 · answered Nov 26 '15 at 08:02

4

Use

$(window).scrollTop()

It'll scroll the window to the item.

 var scrollPos =  $("#branch1").offset().top;
 $(window).scrollTop(scrollPos);

answered Nov 26 '15 at 08:02

Nishad Up

3,457
1
28
32

Please don't add the [same answer to multiple questions](http://meta.stackexchange.com/questions/104227/is-it-acceptable-to-add-a-duplicate-answer-to-several-questions). Answer the best one and flag the rest as duplicates, once you earn enough reputation. If it is not a duplicate, [edit] the answer and tailor the post to the question. – Zoe Feb 28 '19 at 09:38

chaosifier · Answer 7 · 2020-11-06T05:11:28.427

3

If you're simply trying to scroll to the specified element, you can use the scrollIntoView method of the Element. Here's an example :

$target.get(0).scrollIntoView();

edited Nov 06 '20 at 05:11

answered Sep 08 '20 at 05:04

chaosifier

2,666
25
39

1

Thank you! Completely solved my issue. I've also added {behavior: "smooth"} as argument to scroll smoothly. – cleybertandre Jan 15 '21 at 16:46

score 1 · Answer 8 · answered Feb 01 '09 at 06:31

1

I think you might be looking for an "anchor" given the example you have.

<a href="#jump">This link will jump to the anchor named jump</a>
<a name="jump">This is where the link will jump to</a>

The focus jQuery method does something different from what you're trying to achieve.

answered Feb 01 '09 at 06:31

Luca Matteis

29,161
19
114
169

Ya I'm trying to achieve the same anchoring task. Ok, if the focus can't do it, is there any other method in jquery which can do this? – djmzfKnm Feb 01 '09 at 06:38

score 0 · Answer 9 · answered Aug 15 '12 at 12:31

For the focus() function to work on the element the div needs to have a tabindex attribute. This is probably not done by default on this type of element as it is not an input field. You can add a tabindex for example at -1 to prevent users who use tab to focus on it. If you use a positive tabindex users will be able to use tab to focus on the div element.

Here an example: http://jsfiddle.net/klodder/gFPQL/

However tabindex is not supported in Safari.

score 0 · Answer 10 · answered Feb 17 '22 at 18:30

0

maybe you want to try this simple one

$(document).ready(function() {
   $(".to-branch1").click(function() {
     $('html, body').animate({
         scrollTop: $("#branch1").offset().top
     }, 1500);
   });
});

answered Feb 17 '22 at 18:30

Bang Kudil

1

How to scroll to an element in jQuery?

10 Answers10

How does this plugin solve the user experience issue

Linked

Related