带有onclick事件的HTML锚链接仅工作一次

Question

I am ashamed to say that I have an anchor issue. I am trying to use standard HTML anchor link to an anchor on the same page but after the first click (add #example on URL, it stops to work).

//Link <a href="#example">Example headline</a>

//Anchor <h5><a id="example"></a>Example headline</h5>

The code is the same but for some reason when it runs inside jsfiddle it does not work as supposed probably because he can't handle with URL.

https://jsfiddle.net/rmcardoso/mrzg8wLf/2/

I am trying to use jQuery to catch the behavior but for some reason I am not getting there. I can access to the href but the animate is not working..

$(document).on("click",'a[href^="#"]',function(e) {

  /* WORKS!
  console.log(e);
  var element = document.getElementById("findmypartner");
  element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
  */

  e.preventDefault();

  var target = e.target.hash,
  $target = $(target);

  //  $(document).stop().animate({
    //  'scrollTop': $target.offset().top }, 900, 'swing', function () {
    //  window.location.hash = target;
  //});

  $(document).animate({
    //scrollTop: $($.attr(element, 'href')).offset().top}, 500);
    scrollTop: $(e.target.hash).offset().top},500);
    console.log("here!");
  });
});

Answer 1

You have some extra curly brackets in your code... Probaly due to the fact that you had some at the end of lines and when commenting out, you forgot those... And re added. I don't know.

Indent your code correctly, that just helps.
Additionnally, jQuery was not loaded in your Fiddle.

Now, instead of e.target.hash , you can use $(this).attr("href") . $(this) is the clicked element.

 $(document).on("click",'a[href^="#"]',function(e) { e.preventDefault(); var target = $( $(this).attr("href") ); $("html,body").animate({ scrollTop: target.offset().top },1500); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>This is a test</p> <p>this is text text <a href="#example" rel="nofollow">Follow Anchor</a> <p>text texttext texttext texttext texttext texttext texttext texttext text text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text</p> <h3 id="example"> This is headline for anchor </h3> <p>This is a test</p> 

Your Fiddle updated