Jquery 平滑滚动到 DIV - 使用来自链接的 ID 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18831970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Smooth Scroll To DIV - Using ID value from Link
提问by Hyman Tuck
So i'm having some issues with my JQuery which is suppose to scroll to particular divs.
所以我的 JQuery 有一些问题，它应该滚动到特定的 div。
HTML
HTML
<div id="searchbycharacter">
<a class="searchbychar" href="#" id="#0-9" onclick="return false">0-9 |</a>
<a class="searchbychar" href="#" id="#A" onclick="return false"> A |</a>
<a class="searchbychar" href="#" id="#B" onclick="return false"> B |</a>
<a class="searchbychar" href="#" id="#C" onclick="return false"> C |</a>
... Untill Z
</div>
<div id="0-9">
<p>some content</p>
</div>
<div id="A">
<p>some content</p>
</div>
<div id="B">
<p>some content</p>
</div>
<div id="C">
<p>some content</p>
</div>
... Untill Z
JQuery
查询
What i want the code to do is: On click event of an .searchbychar A TAG > Take the ID attributes value and scroll to that...
我希望代码做的是：在 .searchbychar 标签的点击事件上 > 获取 ID 属性值并滚动到那个...
$( '.searchbychar' ).click(function() {
$('html, body').animate({
scrollTop: $('.searchbychar').attr('id').offset().top
}, 2000);
});
回答by Patsy Issa
Ids are meant to be unique, and never use an id that starts with a number, use data-attributes instead to set the target like so :
Id 是唯一的，永远不要使用以数字开头的 id，而是使用数据属性来设置目标，如下所示：
<div id="searchbycharacter">
<a class="searchbychar" href="#" data-target="numeric">0-9 |</a>
<a class="searchbychar" href="#" data-target="A"> A |</a>
<a class="searchbychar" href="#" data-target="B"> B |</a>
<a class="searchbychar" href="#" data-target="C"> C |</a>
... Untill Z
</div>
As for the jquery :
至于 jquery ：
$(document).on('click','.searchbychar', function(event) {
event.preventDefault();
var target = "#" + this.getAttribute('data-target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
回答by pala?н
You can do this:
你可以这样做：
$('.searchbychar').click(function () {
var divID = '#' + this.id;
$('html, body').animate({
scrollTop: $(divID).offset().top
}, 2000);
});
F.Y.I.
供参考
- You need to prefix a class name with a
.(dot) like in your first line of code. $( 'searchbychar' ).click(function() {- Also, your code
$('.searchbychar').attr('id')will return a string ID not a jQuery object. Hence, you can not apply.offset()method to it.
- 您需要在第一行代码中使用
.（点）作为类名的前缀。 $( 'searchbychar' ).click(function() {- 此外，您的代码
$('.searchbychar').attr('id')将返回一个字符串 ID，而不是一个 jQuery 对象。因此，您不能对其应用.offset()方法。
回答by Bibiano Wenceslao
Here is my solution:
这是我的解决方案：
<!-- jquery smooth scroll to id's -->
<script>
$(function() {
$('a[href*=\#]:not([href=\#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});
</script>
With just this snippet you can use an unlimited number of hash-links and corresponding ids without having to execute a new script for each.
仅使用此代码段，您就可以使用无限数量的哈希链接和相应的 ID，而无需为每个链接执行新脚本。
I already explained how it works in another thread here: https://stackoverflow.com/a/28631803/4566435(or here's a direct link to my blog post)
我已经在这里的另一个线程中解释了它是如何工作的：https: //stackoverflow.com/a/28631803/4566435（或者这里是我博客文章的直接链接）
For clarifications, let me know. Hope it helps!
如需澄清，请告诉我。希望能帮助到你！
