Question

我有这个HTML：

<html>
  <head>
     <title>Welcome</title>
  </head>

  <body>

    <form id = "form_createaccount_button" action="#createchooserblink">
        <input type="submit" value="go to article" />
    </form>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <a name = "createchooserblink">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie leo ornare vestibulum accumsan. Etiam dignissim leo cursus eleifend dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et condimentum nunc. Vivamus libero ante, malesuada sed neque vitae, tristique aliquet mi. Vestibulum imperdiet blandit condimentum. Vestibulum sit amet iaculis felis. Sed quis condimentum est, at pellentesque elit. Curabitur rhoncus erat ut magna dictum, in pretium lectus accumsan. Praesent vel libero justo.
    </a>

  <script>
    $(function() {
      $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
  });
</script>

  </body>
</html>

单击go to article link时，它会将我移至底部文章文本，该文本完美无缺。唯一不起作用的是javascript，它假设“半动画”页面滚动到所述链接。

我写错了什么？

Answer 1

由于你的选择器，它不起作用。

$('a[href*="#"]:not([href="#"])')

DOM树中没有“a”标记。将其更改为$('#form_createaccount_button input')

<强>更新

我更正了整个HTML示例。您可以像这样更正您的文档。

<!DOCTYPE html>
<html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

  <body>

    <form id = "form_createaccount_button" action="#createchooserblink">
        <input type="submit" value="go to article" />
    </form>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <a name = "createchooserblink">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie leo ornare vestibulum accumsan. Etiam dignissim leo cursus eleifend dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et condimentum nunc. Vivamus libero ante, malesuada sed neque vitae, tristique aliquet mi. Vestibulum imperdiet blandit condimentum. Vestibulum sit amet iaculis felis. Sed quis condimentum est, at pellentesque elit. Curabitur rhoncus erat ut magna dictum, in pretium lectus accumsan. Praesent vel libero justo.
    </a>

    <script>
      $(function() {
          $('input').click(function(e) {
          e.preventDefault();
          var hash = $(this).parent('form').attr('action');
          var target = $(hash);
          target = target.length ? target : $('[name=' + hash.slice(1) +']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000);
          }

          setTimeout(function(){window.location.href = window.location.href + hash}, 1000);
      });
      });
    </script>

  </body>
</html>

平滑滚动内部链接无效

1 个答案: