单页网站上的侧边栏菜单无法正常工作

时间：2016-02-10 06:18:16

标签： javascript jquery html

我有一个包含大量内容的单页网站，左侧是粘性侧边栏导航。我试图让页面在选择菜单项时向下滚动到内容div中的相应部分。这可能是非常基本的东西，但我无法绕过它（尝试了各种解决方案，但没有成功 - 请参阅下面的代码）。

我对javascript和jquery相对较新，非常感谢您的想法/建议。

到目前为止我做了什么：

  • 侧边栏菜单很粘。
  • 选择菜单项时，侧栏导航栏中链接的活动状态会发生变化。
  • 每当选择相应的导航菜单项时，我还设法获取内容div中的元素以更改活动状态。

现在缺少的是菜单链接可以正常工作，并实际将页面向下推到右侧的部分ID。

再次，抱歉，如果这是一个非常愚蠢的问题，我很感激任何建议。

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

1 个答案:

答案 0 :(得分：1)

可能你想要这个： 

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

<强> JSFiddle

还请看这些问题：

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

Smooth scrolling when clicking an anchor link

此外，您还可以使用插件执行此操作。喜欢 FullPage

相关问题
最新问题