jQuery向下滚动一个项目的点击 [英] jQuery scrolling down on click of an item

问题描述

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

_header.html.erb

  < div class =header_pad> 
< nav class =top-bardata-topbar role =navigation> 
< ul class =title-area> 
< li class =name> 
< h1>< a href =/>投资者俱乐部< / a>< / h1> 
< / ul> 
 
< section class =top-bar-section> 
< ul class =left> 
< li>< a id =resulthref =＃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 =>外汇投资联系人）％>< / br> 
< p class =small-11 small-centered columns> 
 Skype免费且更方便，如果您碰巧遇到问题，请给我们打电话或发邮件给我们。我们会
很高兴收到你的来信。 
< / br> 
<％= image_tag（skype.png，：alt =>skype）％> OR 
< b> [e-mail]< / b> 
< / p> 
< / div> 
  

直播页面： https://infinite-oasis-2303.herokuapp.com
所以我希望当我点击标题中的联系人时，它会一路顺利地滚动直至页面下方的联系人定位。任何帮助？

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

解决方案

似乎您有错字< a名称test>< / a> 。尝试将其更改为< a name =test>< / a>

编辑

由于编辑的问题，这是 application.js 的示例：

  $（document）.ready（function（）{
 $（'。top-bar-section a'）。click （函数（e）{
 e.stopPropagation（）; 
 
 var eid = $（this）.attr（'href'）; 
 var top = $（eid） .offset（）。top; 
 
 $（'html，body'）。animate（{scrollTop：top}，'slow'）; 
}）; 
}） ; 
  

确保锚点 href 和目标 id 是平等的。例如：< div id =contact> < a href =＃contact>

I have a very long HTML page with content. What I am trying to achieve is when someone clicks a menu item in the header, the page should scroll down to an anchor element. I have try many things with no luck. I don't know JavaScript. This is what I tried:

_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>[e-mail]</b>
    </p>
</div>

Live page: https://infinite-oasis-2303.herokuapp.com So I want it that when I click "Contact" in the header, it scrolls smoothly all the way down to the Contact anchor down below the page. Any help?

EDIT: I got it to work with the js I posted as an answer. However. If I click on the back button and click another link, the animation doesn't work anymore till I reload the page. Looks like the javascript loads just once. How do I eliminate that?

解决方案

Seems you have typo <a name"test"></a>. Try change it to <a name="test"></a>

EDIT

Since the question edited, this is the example for 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');
  });
});

Make sure the anchor href and target id is equal. E.g: <a href="#contact"> for <div id="contact">

这篇关于jQuery向下滚动一个项目的点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！