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

Question

i'm using Javascript and I need an anchor to a classname cause we don't have id near the location. Can I use an anchor in an href tag to doing this?

The example is of an anchor with id's use:

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

But can I do this if I have only classname? With anchor, not scrollInToView or something else:

<div class='myclass'>

Thank you!

Answer 1

Is it necessary for the URL to display this anchor? If not read about scrollIntoView .

If you need the url alone to accomplish the navigation, then id or name attributes (on the element itself) are your only options.

BTW, a nice visual effect for smoothly scrolling to a functioning anchor can be accomplished with a CSS property called scroll-behavior :

html
{
        scroll-behavior: smooth;
}

This has nothing to do with your issue, but I thought you might like it.

Answer 2

only Href does not work with class. you can do with 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);
   }
})