在锚点中使用＃来实现javascript功能

Question

Like most things in CSS, there are ways that work, and there are the right ways. Unfortunately, I'm not so much of a CSS guru.

I set '#' I my hrefs for a number of things - for things like opening menus etc.

However, I recently found a need to scroll smoothly to a place on the page. After some investigation, I came up with this code:

$('a[href^="#"]').click(function (e) {
    e.preventDefault();

    $(".body-wrap").animate({
        scrollTop: $(this.hash).offset().top
    }, 300);
});

Nothing wrong with it - it works.

However, it also causes conflict with every other '#' based href on the page that I use for other javascript triggers - specifically a[href^="#"] .

The question I have is, is there a better way to approach this that is still as generic? For instance, you might say - don't need to assign # to all hrefs - I'm not sure what the impact might be, or there might be ways of adding to the selector above to make it more specific - such as, starts with #,but has other characters following.

This kind of thing must challenge developers every day, so there must be preferred techniques, or patterns to deal with this cleanly.

Answer 1

My preferred solution is to give them a class

$(".scrollLink").on("click",function (e) {
  e.preventDefault();
  $(".body-wrap").animate({
    scrollTop: $(this.hash).offset().top
  }, 300);
});

Answer 2

The best practice is prefixing javascript specific classes with js- .

$(document).on('click', '.js-scroll-link', function(e) {
  e.preventDefault();

  $('.body-wrap').animate({
    scrollTop: $(this.hash).offset().top
  }, 300);
});

Answer 3

If you don't want/need to use classes, you can always check if this.hash is an empty string before animating. In that case you will need to add empty/invisible <a id="top"></a> to the top of your page and set href to #top for your "smooth scroll links" which are meant to scroll to the top of page.

However using classes is preferable.