Question

我很say愧地说我有一个主播问题。我试图使用标准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。

现在，您可以使用e.target.hash代替$(this).attr("href")。 $(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>

您的Fiddle updated

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

1 个答案: