我可以在 href 中使用锚点来滚动到具有类名但没有 ID 的位置吗？

Question

我正在使用 Javascript 并且我需要一个类名的锚点，因为我们在该位置附近没有 ID。我可以在 href 标签中使用锚来执行此操作吗？

示例是一个锚点，id 的用途：

<div id='anchorID'>
<a href='mysite.com#anchorID>

但是如果我只有类名，我可以这样做吗？使用锚点，而不是 scrollInToView 或其他东西：

<div class='myclass'>

谢谢！

Answer 1

只有 Href 不适用于 class。你可以用 javascript/jQuery

<a href='javascript:void(0)' data-target='.myClass'>Link</a>

jQuery

$("[data-target]").on('click', function(){
   var target_  = $(this).attr("data-target");
   var targetSelector = $(target_);
   if(targetSelector.length){
      $("html, body").animate({ scrollTop: targetSelector.offset().top }, 1000);
   }
})

Answer 2

URL有必要显示这个锚点吗？如果没有阅读 scrollIntoView.

如果您只需要 url 来完成导航，那么 id 或 name 属性（在元素本身上）是您唯一的选择。

顺便说一句，可以使用名为 scroll-behavior:

的 CSS 属性实现平滑滚动到功能锚点的良好视觉效果

html
{
        scroll-behavior: smooth;
}

这与您的问题无关，但我想您可能会喜欢它。

我可以在 href 中使用锚点来滚动到具有类名但没有 ID 的位置吗？

Can I use an anchor in an href to scroll to a location with classname and no id?

html

javascript

anchor

href