CODEWITHSUNDEEP
javascriptjqueryhtmlfocus
djmzfKnm
djmzfKnm

Reputation: 27185

How to scroll to an element in jQuery?

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!

Upvotes: 74

Views: 163768

Answers (10)

Bang Kudil
Bang Kudil

Reputation: 1

maybe you want to try this simple one

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

Upvotes: 0

chaosifier
chaosifier

Reputation: 2964

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

Upvotes: 4

Nishad Up
Nishad Up

Reputation: 3615

Use

$(window).scrollTop()

It'll scroll the window to the item.

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

Upvotes: 4

Christian C. Salvadó
Christian C. Salvadó

Reputation: 827266

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

Upvotes: 32

Banning
Banning

Reputation: 2287

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.

Upvotes: 119

Jonathan Tran
Jonathan Tran

Reputation: 15276

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;

Upvotes: 4

Klodder
Klodder

Reputation: 130

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.

Upvotes: 0

MCurbelo
MCurbelo

Reputation: 4143

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

Upvotes: 40

User123342234
User123342234

Reputation: 1455

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

Upvotes: 52

Luca Matteis
Luca Matteis

Reputation: 29267

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.

Upvotes: 1

Related Questions