2

I have a single page site with lots of contents and a sticky sidebar navigation on the left. I am trying to get the page to scroll down to the corresponding section in the contents div whenever a menu item is selected. This is probably really basic stuff but I just can’t wrap my head around it (been trying out various solutions, without success – see code below).

I am relatively new to javascript and jquery and would be very grateful for ideas/ suggestions.

What I managed to do so far:

  • The sidebar menu is sticky.
  • The active state of the links in the sidebar nav changes when a menu item is selected.
  • I also managed to get the elements in the contents div to change active state whenever the corresponding nav menu item is selected.

All that is missing now is for the menu links to work and actually push down the page to the right section ids.

Again, sorry if this is a really dumb question, I am grateful for any suggestions.

$(function() {
  $('.feature_tab').click(function(evt) {
    var selectedTab = $(this);
 var featureGroup = selectedTab.parents('.features_public_content_container');
    var allTabs = featureGroup.find('.feature_tab');
    var allContent = featureGroup.find('.feature_box');

 // get the rel attribute to know what box we need to activate
 var rel = $(this).attr('rel');

 // clear tab selections
 allTabs.removeClass('selected');
 selectedTab.addClass('selected');

 // make all boxes "in-active"
 $('.feature_box').each(function() {
 $(this).removeClass('active');
 });

 //show what we need
 $('.feature_box.feature_category_'+rel).addClass('active');

 // find correlated content
 var idx = selectedTab.index();
 var selectedContent = $(allContent);
 selectedContent.removeClass('in-active');

 $('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 1000);
    return false;
    });

  });
});
.hidden {
 display:block;
 color: blue;
 }

.features_page {
    margin-top:65px;
    position: relative;
 }


.features_public_content_container {
    width:100%;
 height: 100% !important;
 position: relative;
 max-width:1200px;
 margin-left:auto;
 margin-right:auto;
 font-size:12px;
 padding:0 40px
 }


#left_sidebar {
    height: 100% !important;
    width: 20%;
    border: 4px solid green !important;
    position: absolute;
 float: left
 }

#right {
    border: 4px solid pink !important;
 height: auto;
 max-width:80%;
 top: 0;
 right: 0;
 float: right;
 position: relative;
 }

.features_page .sidebar_nav_container {
 margin:45px auto;
 background: yellow;
    position: relative;
 float: left
 }

.features_page .sidebar_nav_container .feature_tab {
 float:none;
 width:100%;
 color:#1193f6 !important;
 text-align: left;
 line-height:40px;
 height:40px;
 padding-left: 24px;
 font-size:12px;
 border-left:1px solid #efefef !important;
 text-transform:uppercase;
 font-weight:500;
 overflow:hidden;
 cursor:pointer;
 position:relative
 }

.features_page .sidebar_nav_container .feature_tab .indicator {
 position:absolute;
 width:100%;
 height: 100%;
 display:none;
 bottom:0;
 left: 0
 }

.features_page .sidebar_nav_container .feature_tab:hover .indicator {
 display:block;
 border-left:4px solid #d6ecfd
 }

.features_page .sidebar_nav_container .feature_tab.selected .indicator {
 display:block;
 border-left:4px solid #1193f6;
 }


.features_page .feature_boxes_container {
 padding-bottom:80px;
 padding-top:45px;
 text-align: center;
 background: #f2f2f2;
 }

.features_page .feature_boxes_container .feature_box {
  background:#fff;
  display:inline-block;
  height:210px;
  width:235px;
  margin:12px;
  padding: 24px;
  text-align:center;
  vertical-align:top;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -ms-border-radius:2px;
  -o-border-radius:2px;
  border-radius:2px;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.12);
  -ms-box-shadow:0 1px 3px rgba(0,0,0,0.12);
  -o-box-shadow:0 1px 3px rgba(0,0,0,0.12);
  box-shadow:0 1px 3px rgba(0,0,0,0.12)
  }

.features_page .feature_boxes_container .feature_box.active {
  border: 2px solid #1193f6;
  }


.features_page .feature_boxes_container .feature_box .feature_overview_icon {
 padding: 18px
 }

.features_page .feature_boxes_container .feature_box.active .feature_overview_icon {
 color: #1193f6;
}

.features_page .feature_boxes_container .feature_box.in-active .feature_overview_icon {
 color: #363636;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body id='public_layout' class='with_header'>

<div class="layout_wrapper">

  <div class="features_page">
       
    <div class="container features_public_content_container">
      
                  
   <div class="col span_2" id="left_sidebar">
                              
     <div class="sidebar_nav_container">

    <div class="feature_tab indicator feature_category_A selected" rel="A"><a href="#A">Features A</a></div>
    <div class="feature_tab indicator feature_category_B" rel="B"><a href="#B">Features B</a></div>
    <div class="feature_tab indicator feature_category_C" rel="C"><a href="#C">Features C</a></div>
    <div class="feature_tab indicator feature_category_D" rel="D"><a href="#D">Features D</a></div>
    <div class="feature_tab indicator feature_category_E" rel="E"><a href="#E">Features E</a></div>
        
        </div>
      
      </div> <!-- / sidebar navigation -->


      <div class="col span_10" id="right">

        <div class="feature_boxes_container">
          
                                  
          <div id="A"> <!-- START A Features -->

            <div class="feature_box feature_category_A active">Feature A-1</div>

            <div class="feature_box feature_category_A active">Feature A-2</div>

            <div class="feature_box feature_category_A active">Feature A-3</div>
            
          </div>
     
          
          <div id="B"> <!-- START B Features -->

            <div class="feature_box feature_category_B in-active">Feature B-1</div>

            <div class="feature_box feature_category_B in-active">Feature B-2</div>

            <div class="feature_box feature_category_B in-active">Feature B-3</div>
            
          </div>
          
       
          <div id="C"> <!-- START C Features -->

            <div class="feature_box feature_category_C in-active">Feature C-1</div>

            <div class="feature_box feature_category_C in-active">Feature C-2</div>

            <div class="feature_box feature_category_C in-active">Feature C-3</div>
          
          </div>
                                  
                                  
        </div> <!-- /.feature_boxes_container -->

      </div> <!-- /.col .span_10 -->

    </div> <!-- /.public_content_container -->

  </div> <!-- /.features_page -->

</div> <!-- /.layout_wrapper -->

</body>

</html>
32k_
  • 87
  • 2
  • 12

1 Answers1

1

Probably you want this:

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});

JSFiddle

Please also see these questions:

Simple jQuery scroll to anchor up or down the page...?

Smooth scrolling when clicking an anchor link

And also you can use plugin to do this. like FullPage

Community
  • 1
  • 1
Pedram
  • 15,766
  • 10
  • 44
  • 73
  • thank you for posting, and also for the links and the fiddle. i've tried out what you suggested (and the stuff i found in the other posts), but i'm still hitting the wall. seems like i'm doing something fundamentally wrong here, but no idea what it is. any further hints? (i updated my fiddle with the js that you posted, and i also tried cleaning up my code snippets for clarity.) thank you! – 32k_ Feb 10 '16 at 07:07
  • Your welcome, your problem is you gave a duplicated id to divs, already you have 3 divs with "A" id, and etc. you can put every 3 divs in one div with one id. something like this: `
    `     – Pedram Feb 10 '16 at 07:14
  • You are right, I corrected the mistake ... doesn't seem to solve the issue, unfortunately ... Could it have anything to do with the way I split the sidebar navigation div from the main contents div? Still not clear what I'm doing wrong. Thanks for your help. – 32k_ Feb 10 '16 at 07:31
  • well I found your problem, remove `indicator` div under links. or your anchors need higher `z-index` than indicator div. you know what, we clicked indicator not your links! please see this example [JSFiddle](https://jsfiddle.net/vbg6h6ow/) – Pedram Feb 10 '16 at 07:42
  • Great, almost there!! Removing the "indicator divs" has solved the basic issue of the sidebar nav menu links not working, so I am happy to accept your answer. The trouble here, though: removing the indicator divs screws up the entire active class change mechanism that I had managed to put in place previously. I suppose this would be a different issue, but if you have any suggestions about how to make the links work *without* breaking the existing highlighting (active change) on the page, then I'd be very grateful. (I'll try to clarify what I mean if this is not clear.) Thanks again! – 32k_ Feb 10 '16 at 08:01
  • Try this `.feature_tab a { z-index: 9; position: relative; }` with this you don't need to remove that indicator div. – Pedram Feb 10 '16 at 08:15
  • Nope, I tried and this does not solve the incompatibility issue, unfortunately. But you answered my initial question, I'll try to take it from here – thank you again for your help! – 32k_ Feb 10 '16 at 09:38
  • Your welcome, so I think didn't understand this issue, I thought you don't want to remove or invisible that div. if you need more help please let me know. – Pedram Feb 10 '16 at 09:47