Sarma Sarma - 1 year ago 79
Javascript Question

Scroll down on click doesn't work well

I have header with menu where on click on menu it scroll down to div with similar id here is code:

var y = $(this).attr('id');
var x = $('#'+y+'e').offset().top;

Example here
But when I click about and after that scroll click register it does nothing and when i click contact which is after register it scroll down to register and when I click contact again it go back to about.
It works only if I click about twice or about and home after and after that some other from menu. Try it you will see what am I talking about....

html code:

<div class="row">
<div id="homee" class="content" style="background: red;"></div>
<div id="aboute" class="content" style="background: blue;"></div>
<div id="registere" class="content" style="background: yellow;"></div>
<div id="contacte" class="content" style="background: green;"></div>


Answer Source

Because you haven't supplied your code is it a little hard to fix your problem however you are probably just missing a .stop() when you animate. Take a look at my example

jsFiddle link :


$(function() {
  $('.scroll').on('click', function() {

    var $target = $('.'+$(this).data('scroll-target'));
    var $parent = $target.parent();

      scrollTop: $parent.scrollTop() + $target.position().top - 50//$('.' + target).offset().top
    }, 'slow');


<div class="buttons">
  <a class="scroll" data-scroll-target="first">First</a>
  <a class="scroll" data-scroll-target="second">Second</a>
  <a class="scroll" data-scroll-target="third">Third</a>
  <a class="scroll" data-scroll-target="fourth">Fourth</a>

<div class="parent-div">
  Parent div
  <div class="huge-content first">
  <div class="huge-content second">
  <div class="huge-content third">
  <div class="huge-content fourth">


.buttons {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 50px;
  background-color: #fff;
  border: solid 1px #f0f;

.parent-div {
  margin-top: 50px;
  padding: 15px;
  background-color: #000;
  color: #fff;
  max-height: 500px;
  overflow: auto;

.huge-content {
  height: 500px;

.first {
  background-color: #f00;

.second {
  background-color: #0f0;

.third {
  background-color: #00f;

.fourth {
  background-color: #f0f;


Try my jsFiddle now and look at my code. All you have to do is get the parents scrollTop and plus that to the target. Also I have had to add 50 because of my nav fixed position height: 50 css property

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download