dongzhuang6177 2017-03-23 11:07 采纳率: 100%
浏览 27
已采纳

平滑滚动内部链接将无法正常工作

I have this 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>

When clicking the go to article link, it moves me to the bottom article text which worked perfectly. The only thing that is not working is the javascript which was suppose to "semi-animate" the page to scroll to the said link.

Did I wrote something wrong?

  • 写回答

1条回答 默认 最新

  • duanmuyao0463 2017-03-23 11:25
    关注

    It doesn't work because of your selector.

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

    There is no "a" tag in your DOM tree. Change it to $('#form_createaccount_button input')

    UPDATE

    I corrected whole your HTML sample. You may correct your document like this.

    <!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器