平滑滚动内部链接不起作用

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，该javascript应该“半动画”页面以滚动到所述链接。

我写错了吗？

Answer 1

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

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

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

UPDATE

我更正了整个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 个解决方案

解决方案1
0 已采纳 2017-03-23 11:25:20

平滑滚动内部链接不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-03-23 11:25:20

解决方案1
0 已采纳 2017-03-23 11:25:20