jQuery在单击项目时向下滚动答案

【问题标题】：jQuery scrolling down on click of an itemjQuery在单击项目时向下滚动
【发布时间】：2015-06-16 16:35:24
【问题描述】：

我有一个很长的包含内容的 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>

应用程序.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只加载一次。我该如何消除它？

【问题讨论】：

在 href="#contact" <a id="result" href="#contact">Contact</a> 和联系部分使用 <div id="contact">...</div>
好的。我到了这个阶段，但向下滚动效果不起作用。它只是跳到锚点，没有效果。但平滑向下滚动是我所追求的。

标签： javascript jquery html css ruby-on-rails

【解决方案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">

【讨论】：

我编辑了代码。但正如您在此处看到的：infinite-oasis-2303.herokuapp.com 没有发生平滑滚动。
我已经通过运行您的 application.js 脚本来测试它，然后再发表评论并开始工作。
我再次编辑了我的答案。 js 似乎只加载一次。

【解决方案2】：

这可能会有所帮助，

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

将“时间”作为第二个参数传递给动画函数。它应该在这么多“时间”内导航到目标位置。从而有助于顺利过渡。

【讨论】：

你可以增加提到的时间，说，1000 1秒，1500 1.5秒，依此类推。
太棒了 :) 不要用 'swing' 和其他东西来超载它，除非它是绝对必要的，因为这会增加 UI 方面的开销.. 只是“时间”参数可以给你一个平稳过渡。一切顺利！另外，如果您觉得有帮助，您可以投票赞成答案；）

【解决方案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;
      });
  });
});

【讨论】：