blocks|key|1422114|text|考虑到你的例子，我想你可能正在寻找一个“锚”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1422115|<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>|code-block|syntax|javascript|1422116|focus+jQuery方法所做的事情与您试图实现的目标有所不同。|1422117|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code>&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;
</code></pre>

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

blocks|key|1422161|text|检查jQuery.ScrollTo，我认为这是您想要的行为，检查demo。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1422162|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/flesler/jquery.scrollTo|1|http://demos.flesler.com/jquery/scrollTo/^0|2|F|0|W|4|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

Check <a href="https://github.com/flesler/jquery.scrollTo" rel="noreferrer">jQuery.ScrollTo</a>, I think that's the behavior that you want, check the <a href="http://demos.flesler.com/jquery/scrollTo/" rel="noreferrer">demo</a>.

blocks|key|1637076|text|对于我的问题，这段代码可以工作，我必须在页面加载时导航到一个锚标签：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1637077|$(window).scrollTop($('a#captchaAnchor').position().top);|code-block|syntax|javascript|1637078|就此而言，您可以在任何元素上使用它，而不仅仅是锚标记。|1637079|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code>$(window).scrollTop($('a#captchaAnchor').position().top);
</code></pre>

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

blocks|key|1637120|text|就像@user293153一样，我刚刚发现了这个问题，似乎没有得到正确的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1637121|他的回答是最好的。但您也可以为元素设置动画。|1637122|$('html,+body').animate({+scrollTop:+$("#some_element").offset().top+},+500);|code-block|syntax|javascript|1637123|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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.

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

blocks|key|1637158|text|您可以像这样扩展jQuery功能：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1637159|jQuery.fn.extend({
scrollToMe:+function+()+{
++++var+x+=+jQuery(this).offset().top+-+100;
++++jQuery('html,body').animate({scrollTop:+x},+500);
}});|code-block|syntax|javascript|1637160|然后：|1637161|$('...').scrollToMe();|1637162|容易;-)|1637163|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You can extend jQuery functionalities like this:

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

and then:

<pre><code>$('...').scrollToMe();
</code></pre>

easy ;-)

blocks|key|1422323|text|为了让focus()函数对元素起作用，div需要有一个tabindex属性。默认情况下，这种类型的元素可能不会执行此操作，因为它不是输入字段。您可以添加一个tabindex，例如at+-1，以防止使用tab的用户关注它。如果您使用正tabindex，用户将能够使用tab将焦点放在div元素上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1422324|下面是一个示例：http://jsfiddle.net/klodder/gFPQL/|offset|length|1422325|但是，Safari不支持tabindex。|1422326|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/klodder/gFPQL/^0|0|8|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

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: <a href="http://jsfiddle.net/klodder/gFPQL/" rel="nofollow">http://jsfiddle.net/klodder/gFPQL/</a>

However tabindex is not supported in Safari.

blocks|key|1422392|text|如果您只是想滚动到指定的元素，那么可以使用该元素的scrollIntoView方法。下面是一个例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1422393|$target.get(0).scrollIntoView();|code-block|syntax|javascript|1422394|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView^0|P|E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

If you're simply trying to scroll to the specified element, you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" rel="nofollow noreferrer">scrollIntoView</a> method of the Element.
Here's an example :
<pre><code>$target.get(0).scrollIntoView();
</code></pre>

blocks|key|1637330|text|也许你想试试这个简单的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1637331|$(document).ready(function()+{
+++$(".to-branch1").click(function()+{
+++++$('html,+body').animate({
+++++++++scrollTop:+$("#branch1").offset().top
+++++},+1500);
+++});
});|code-block|syntax|javascript|1637332|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

maybe you want to try this simple one
<pre><code>$(document).ready(function() {
 $(&quot;.to-branch1&quot;).click(function() {
 $('html, body').animate({
 scrollTop: $(&quot;#branch1&quot;).offset().top
 }, 1500);
 });
});
</code></pre>

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

<pre><code>document.location.href="#branch1";
</code></pre>

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,

<pre><code>$("#branch1").focus();
</code></pre>

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!

How to scroll to an element in jQuery?

jQuery

我在JavaScript中执行了以下代码，以便将焦点放在特定的元素上(branch1是一个元素)，document.location.href="#branch1";但由于我也在我的web应用程序中使用jQuery，所以我想用jQuery编写上面的代码。我试过了，但不知道为什么不起作用，$("#branch1").fo...

问如何滚动到jQuery中的元素？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何滚动到jQuery中的元素？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何滚动到jQuery中的元素？
EN