Javascript Jquery平滑滚动到DIV-使用链接中的ID值

所以我的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

您可以这样做：

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

F.Y.I

• 您需要在类名前面加上
  （dot）前缀，就像在第一行代码中一样

• $（'searchbychar'）。单击（函数（）{

• 另外，您的代码

  $（'.searchbychar'）.attr（'id'）

  将返回一个字符串id而不是jQuery对象。因此，您不能对其应用

  .offset（）

  方法

---

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>

以下是我的解决方案：

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

$（函数（）{
$（'a[href*=\\\\\\\\\\\\\\\\\\\\\\]]：不是（[href=\\\\\\\\\\\\\\\\\\]]）。单击（函数（）{
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（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 500);
返回false；
}
}
});
});

仅使用此代码段，您就可以使用无限数量的哈希链接和相应的ID，而无需为每个链接执行新脚本

我已经在这里的另一个线程中解释了它是如何工作的：（或者这里有一个）

---

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

从id@JackWilliams没注意到他把它放在那里吗？好的做法吗？@JackWilliams你能添加一个console.log（this.id）@JackWilliams无视编辑是大脑放屁的时刻，让我们调试一下，在event.preventDefault（）之后添加一个console.log（this.id）对于干燥器编码，除了jQuery中的

event.preventDefault（）

之外，还应该使用

event.stopPropagation（）

。这与

onclick=“return false”完成相同的任务

。不过解决方案太棒了！！我忘了返回false:-P阻止默认交易，该交易将在回家后进行编辑非常感谢朋友…你的解释在这里帮助了我…非常感谢。。。。。。

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

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