CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
hnnnng
hnnnng

Reputation: 495

Sticky nav and scroll to top confusion

I have a sticky nav in the middle of the page (Agenda days) that becomes fixed while the content of the sticky nav is being scrolled down. The nav is Bootstrap tabs, this is how the HTML look like:

<ul class="nav nav-tabs followMeBar agenda-days text-center">
  <li class="active"><a class="day" href="#1" data-toggle="tab">Day 1</a></li>
  <li><a class="day" href="#2" data-toggle="tab">Day 2</a></li>
  <li><a class="day" href="#3" data-toggle="tab">Day 3</a></li>
</ul>

and the tab contents are located in divs with corresponding ids, like this:

<div class="tab-pane" id="1">
    <h3>Day 1</h3>

Everything is working fine except one thing, if you are half way scrolled down on Day 1 and then click on Day 2, the content switches to Day 2 but you're still halfway scrolled down. How do I make Day 1, Day 2, Day 3 to switch the content AND scroll to the top of the Agenda content (not to the top of the page).

Here's my full code example: https://codepen.io/anon/pen/POvGPr

Upvotes: 0

Views: 601

Answers (1)

Stefano Spkg Gagliardi
Stefano Spkg Gagliardi

Reputation: 157

First of all add class to li container of days link. Second for instance add a selector before days navigation.

<div class="test"></div>

<li class="active scroll-top"><a  href="#1" data-toggle="tab">Day 1</a></li>

  $('.scroll-top').click(function(){
     $('html,body').animate({
       scrollTop: $(".test").offset().top},
       'slow');
  });

Upvotes: 1

Related Questions