Question

我有一个包含内容的非常长的HTML页面。我想要实现的是当有人点击标题中的菜单项时，页面应向下滚动到一个锚元素。我尝试了许多没有运气的事情。我不懂JavaScript。这就是我试过的：

_header.html.erb

<div class="header_pad">
    <nav class="top-bar" data-topbar role="navigation">
      <ul class="title-area">
        <li class="name">
          <h1><a href="/">The Investors' Club</a></h1>
      </ul>

      <section class="top-bar-section">
        <ul class="left">
          <li><a id="result" href="#contact">Contact</a></li>
        </ul>
      </section>
    </nav>
</div>

的application.js

 function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

$("#result").click(function() {
   scrollToAnchor('contact');
});

index.html.erb

<div id="contact">
    <%= image_tag("contact_us.png", :alt => "Forex Investment Contact") %></br>
    <p class="small-11 small-centered columns">
        Skype is free and more convenient, give us a call or send us an email if you happen to have some questions. We will
        be glad to hear from you. 
        </br>
        <%= image_tag("skype.png", :alt => "skype") %> OR 
        <b>100forexinvestors@gmail.com</b>
    </p>
</div>

实时网页：https://infinite-oasis-2303.herokuapp.com 所以我想要的是，当我点击标题中的“联系人”时，它会一直平滑地滚动到页面下方的联系人锚点。有什么帮助吗？

编辑：我得到它与我发布作为答案的js一起工作。然而。如果我单击后退按钮并单击另一个链接，动画将不再起作用，直到我重新加载页面。看起来javascript只加载一次。我该如何消除它？

Answer 1

好像你有拼写错误<a name"test"></a>。尝试将其更改为<a name="test"></a>

修改

自编辑问题以来，这是application.js：
的示例
$(document).ready(function() { $('.top-bar-section a').click(function(e) { e.stopPropagation(); var eid = $(this).attr('href'); var top = $(eid).offset().top; $('html, body').animate({ scrollTop: top }, 'slow'); }); });

确保锚href和目标id相等。例如：<a href="#contact">
<div id="contact">

Answer 2

这可能会有所帮助，

    function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},500);

通过＆＃34;时间＆＃34;作为animate函数的第二个参数。它应该导航到目标位置那么多的时间＆＃34;。从而帮助平稳过渡。

Answer 3

行。我得到了这个js的工作：

$(document).ready(function(){
  $('a[href^="#"]').on('click',function (e) {
      e.preventDefault();

      var target = this.hash;
      var $target = $(target);

      $('html, body').stop().animate({
          'scrollTop': $target.offset().top
      }, 1200, 'swing', function () {
          window.location.hash = target;
      });
  });
});

jQuery在点击项目时向下滚动

3 个答案: