[英]Jquery Smooth Scroll To DIV - Using ID value from Link
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 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的点击事件A TAG>获取ID属性值并滚动到那...
$( '.searchbychar' ).click(function() {
$('html, body').animate({
scrollTop: $('.searchbychar').attr('id').offset().top
}, 2000);
});
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);
});
You can do this: 你可以这样做:
$('.searchbychar').click(function () {
var divID = '#' + this.id;
$('html, body').animate({
scrollTop: $(divID).offset().top
}, 2000);
});
FYI FYI
.
您需要在类名前加上一个.
( dot ) like in your first line of code. ( 点 )就像你的第一行代码一样。 $( 'searchbychar' ).click(function() {
$('.searchbychar').attr('id')
will return a string ID not a jQuery object. 此外,您的代码$('.searchbychar').attr('id')
将返回字符串ID而不是jQuery对象。 Hence, you can not apply .offset()
method to it. 因此,您无法对其应用.offset()
方法。 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! 希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.