How to scroll to an element in jQuery?
JavascriptJqueryHtmlFocusJavascript Problem Overview
I have done the following code in JavaScript to put focus on the particular element (branch1 is a
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!
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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);
Solution 3 - Javascript
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 ;-)
Solution 4 - Javascript
Check jQuery.ScrollTo, I think that's the behavior that you want, check the demo.
Solution 5 - Javascript
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;
Solution 6 - Javascript
Use
> $(window).scrollTop()
It'll scroll the window to the item.
var scrollPos = $("#branch1").offset().top;
$(window).scrollTop(scrollPos);
Solution 7 - Javascript
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();
Solution 8 - Javascript
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.
Solution 9 - Javascript
For the focus() function to work on the
Here an example: http://jsfiddle.net/klodder/gFPQL/
However tabindex is not supported in Safari.
Solution 10 - Javascript
maybe you want to try this simple one
$(document).ready(function() {
$(".to-branch1").click(function() {
$('html, body').animate({
scrollTop: $("#branch1").offset().top
}, 1500);
});
});