Jquery Smooth Scroll To DIV - 使用链接中的 ID 值答案

【问题标题】：Jquery Smooth Scroll To DIV - Using ID value from LinkJquery Smooth Scroll To DIV - 使用链接中的 ID 值
【发布时间】：2026-01-26 19:25:04
【问题描述】：

所以我的 JQuery 有一些问题，应该滚动到特定的 div。

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

我想要代码做的是：在 .searchbychar A TAG 的点击事件上 > 获取 ID 属性值并滚动到那个...

$( '.searchbychar' ).click(function() {

    $('html, body').animate({
        scrollTop: $('.searchbychar').attr('id').offset().top
    }, 2000);

});

【问题讨论】：

从 id 中获取哈希

标签： javascript jquery html parsing

【解决方案1】：

id 是唯一的，永远不要使用以数字开头的 id，而是使用 data-attributes 来设置目标：

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

至于 jquery ：

$(document).on('click','.searchbychar', function(event) {
    event.preventDefault();
    var target = "#" + this.getAttribute('data-target');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 2000);
});

【讨论】：

@JackWilliams 没有注意到他有它 O.o 这甚至是一种好习惯吗？
@JackWilliams 你能添加一个console.log(this.id)
@JackWilliams 忽略了编辑是脑放屁的时刻，我们来调试一下，在 event.preventDefault() 之后添加一个 console.log(this.id)
对于 DRYer 编码，您应该在 jQuery 中使用 event.stopPropagation() 和 event.preventDefault()。这完成了与onclick="return false" 相同的事情。很棒的解决方案！
我忘记了返回 false :-P 阻止默认交易，一旦回家就会编辑

【解决方案2】：

你可以这样做：

$('.searchbychar').click(function () {
    var divID = '#' + this.id;
    $('html, body').animate({
        scrollTop: $(divID).offset().top
    }, 2000);
});

仅供参考

您需要在类名前面加上 .（dot），就像在您的第一行代码中一样。
$( 'searchbychar' ).click(function() {
另外，您的代码$('.searchbychar').attr('id') 将返回一个字符串ID，而不是一个jQuery 对象。因此，您不能对其应用.offset() 方法。

【讨论】：

非常感谢哥们......你的解释在这里帮助了我......谢谢 tonnnnnnnnn......

【解决方案3】：

这是我的解决方案：

<!-- 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>

只需这个 sn-p，您就可以使用无限数量的哈希链接和相应的 id，而不必为每个都执行新脚本。

我已经在另一个线程中解释了它是如何工作的：https://*.com/a/28631803/4566435（或者这里是direct link to my blog post）

如需澄清，请告诉我。希望对您有所帮助！

【讨论】：