CODEWITHSUNDEEP
javascriptjquery
Sarma
Sarma

Reputation: 53

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:

 $(".menu").click(function(){     
   var y = $(this).attr('id');
   var x = $('#'+y+'e').offset().top;
   $('.row').animate({scrollTop:x-60},1000);
 });

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>


</div>

Upvotes: 1

Views: 937

Answers (2)

Canvas
Canvas

Reputation: 5897

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 : https://jsfiddle.net/3x6wq73f/2/

Javascript

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

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

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

HTML

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

<div class="parent-div">
  Parent div
  <div class="huge-content first">
    One
  </div>
  <div class="huge-content second">
    Two
  </div>
  <div class="huge-content third">
    Three
  </div>
  <div class="huge-content fourth">
    Four
  </div>
</div>

CSS

.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;
}

Update

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

Upvotes: 2

winhowes
winhowes

Reputation: 8085

Instead of:

$('.row').animate({scrollTop:x-60},1000);

Do this:

$('html, body').animate({scrollTop:x-60},1000);

Upvotes: 0

Related Questions