sidebar menu on single page site not working

Question

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>

Answer 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