jQuery scrolling down on click of an item

Question

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>100forexinvestors@gmail.com</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?

in href="#contact" `Contact` and in contact section use `
...
` — Tamil Selvan C, Jun 16 '15 at 16:40
OK. I got to this stage but the scroll down effect doesn't work. It just jumps to the anchor, no effect. But the smooth scroll down is what I am after. — emi, Jun 16 '15 at 16:47

Nanang Mahdaen El-Agung · Answer 1 · 2015-06-16T17:17:17.930

2

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">

edited Jun 16 '15 at 17:17

answered Jun 16 '15 at 16:42

Nanang Mahdaen El-Agung

1,404
10
14

I edited the code. But as you can see here: https://infinite-oasis-2303.herokuapp.com the smooth scroll is not happening. – emi Jun 16 '15 at 16:53
I've test it by running your `application.js` script before posting comment and get working. – Nanang Mahdaen El-Agung Jun 16 '15 at 17:00
I edited my answer again. The js seems to load just once. – emi Jun 16 '15 at 17:25

score 0 · Answer 2 · answered Jun 16 '15 at 17:07

0

this might help,

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

Pass "time" as the second argument to the animate function. It should navigate to the target location in that much amount of "time". Thus helping smooth transition.

answered Jun 16 '15 at 17:07

Sudhansu Choudhary

3,322
3
19
30

You can increase the time mentioned to say, 1000 for 1 second, 1500 for 1.5 seconds, so on and so forth depending on your requirement. – Sudhansu Choudhary Jun 16 '15 at 17:09
great :) don't overload it with 'swing' and other stuffs until and unless it's an utter necessity as this increases overheads on the UI side.. just the "time" parameter can give you a smooth transition. All the best! Also, you can upvote the answer if u feel it helped ;) – Sudhansu Choudhary Jun 16 '15 at 17:30

score 0 · Accepted Answer · answered Jun 16 '15 at 17:22

OK. I got it to work with this piece of 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 scrolling down on click of an item

3 Answers3

Linked