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

User · Answer

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 ;-)

User · Answer

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

User · Answer

I think you might be looking for an  anchor  given the example you have    lt a href   jump  gt This link will jump to the anchor named jump lt  a gt   lt a name  jump  gt This is where the link will jump to lt  a gt    The focus jQuery method does something different from what you re trying to achieve

User · Answer

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

User · Answer

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

User · Answer

I think you might be looking for an  anchor  given the example you have    lt a href   jump  gt This link will jump to the anchor named jump lt  a gt   lt a name  jump  gt This is where the link will jump to lt  a gt    The focus jQuery method does something different from what you re trying to achieve

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Use        window  scrollTop     It ll scroll the window to the item    var scrollPos        branch1   offset   top     window  scrollTop scrollPos

User · Answer

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

User · Answer

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 ;-)

User · Answer

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

User · Answer

Use        window  scrollTop     It ll scroll the window to the item    var scrollPos        branch1   offset   top     window  scrollTop scrollPos

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I think you might be looking for an  anchor  given the example you have    lt a href   jump  gt This link will jump to the anchor named jump lt  a gt   lt a name  jump  gt This is where the link will jump to lt  a gt    The focus jQuery method does something different from what you re trying to achieve

User · Answer

I think you might be looking for an  anchor  given the example you have    lt a href   jump  gt This link will jump to the anchor named jump lt  a gt   lt a name  jump  gt This is where the link will jump to lt  a gt    The focus jQuery method does something different from what you re trying to achieve

[javascript] How to scroll to an element in jQuery?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to focus