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

Question

我很to愧地说我有一个主播问题。 我正在尝试使用标准HTML锚链接链接到同一页面上的锚，但是在第一次单击后（在URL上添加#example，它将停止工作）。

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

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

代码是相同的，但是由于某种原因，当它在jsfiddle中运行时，它不能按预期工作，可能是因为他无法使用URL处理。

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

我正在尝试使用jQuery来捕获行为，但是由于某种原因我没有到达那里。 我可以访问href，但是动画不起作用。

$(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

您的代码中有一些多余的花括号……可能是由于您在行尾有一些花括号，而注释掉时却忘记了这些……并重新添加。 我不知道。

正确缩进代码，这只会有所帮助。
另外，jQuery尚未加载到您的Fiddle中。

现在，可以使用$(this).attr("href")代替e.target.hash 。 $(this)是单击的元素。

 $(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> 

您的小提琴已更新