Question

我尝试在Drupal的Basic Page中创建一个“帮助中心”。我意识到我遇到了问题，因为动画scrollTop附加到<div id="content-hc">而不是body, html。

由于我需要div的特定高度，所以在css中你会找到

#content-hc{
height:600px;
font-size:15px;
overflow:hidden;
overflow-y:scroll;
}

现在点击我在js中的导航菜单：

var tg = jQuery(this).attr("href");
var oft = jQuery("section "+tg).offset().top;
jQuery("#content-hc").animate({scrollTop:oft-100});

总之问题：

<li>
<a href="#section1" class="parent">Section 1</a>
<ul>
<li>
<a href="#section1-1">Section 1.1</a>
</li>
</ul>
</li>

点击一个导航元素， content-hc 滚动到false位置，同一部分的第二次点击不会保持稳定。

任何想法为什么？

更新代码SNIPSET ON 28-4-2015

jQuery(document).ready(function() {
	jQuery("#nav-hc li a").click(function(){
		jQuery("#nav-hc li a").removeClass("current");
		jQuery(this).addClass("current");
		var tg = jQuery(this).attr("href");
		var oft = jQuery("section "+tg).offset().top;
		alert(oft);
		jQuery("#content-hc").animate({scrollTop:oft-100});
		return false;
	});
});

.helpcenter{

}

#nav-hc ul{
list-style: none;
margin:0;
}

#nav-hc ul li{
width:200px;
background-color: #222;
color: #fff;
margin-bottom:0;
padding: 10px;
border-bottom: 1px solid #3e3e3e;
text-align: -webkit-match-parent;
}

#nav-hc li a {
  color: #dcdcdc;
  display: block;
  -webkit-transition: background-color .2s ease;
  -moz-transition: background-color .2s ease;
  transition: background-color .2s ease;
}

#nav-hc li a.current {
  background: #00abea;
  color: #fff;
}

/*#nav-hc li a.parent {
  background: url(../img/plus-minus.png) 10px 10px no-repeat;
}*/

#content-hc{
height:600px;
font-size:15px;
overflow:hidden;
overflow-y:scroll;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>



<div class="helpcenter">
   <div class="col-md-3">
      <div id="nav-hc">
         <ul>
            <li>
               <a href="#section1" class="parent">Section 1</a>
			   <ul>
			      <li>
				  <a href="#section1-1">Section 1.1</a>
				  </li>
			   </ul>
            </li>
            <li>
               <a href="#section2" class="parent">Section 2</a>
			   <ul>
			      <li>
				  <a href="#section2-1">Section 2.1</a>
				  </li>
			   </ul>
            </li>
         </ul>
      </div>
   </div>
   <div class="col-md-9">
      <div id="content-hc">
	     <section id="section1">
		   <h2>Hello this is section 1</h2>
		   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisi dolor, tincidunt in magna at, porttitor lacinia velit. Nam sed volutpat ligula, vel euismod lorem. Duis commodo in justo sed commodo. Phasellus a vehicula libero, quis vulputate nisl. Phasellus pulvinar pellentesque vestibulum. Vivamus ut bibendum enim, at auctor odio. Phasellus ullamcorper, nisl vitae bibendum elementum, diam lectus sagittis nulla, et sagittis libero quam nec mauris. Maecenas quis gravida magna. Aenean feugiat erat non auctor tincidunt. Pellentesque lacus dui, faucibus at hendrerit condimentum, fermentum et purus. Nulla volutpat cursus risus sit amet porta. Sed nec finibus nisl, scelerisque blandit nisi. Mauris quis neque pretium, consequat leo vel, consequat sapien.</p>

<p>Proin consequat est sit amet cursus luctus. Donec consectetur neque nulla, lobortis ultricies neque aliquam in. Morbi non nibh quis ligula mollis feugiat. Nullam sagittis mi vitae auctor aliquam. Donec sodales justo erat, a malesuada ligula ultricies eget. Nam massa dolor, placerat ultricies metus eu, sagittis facilisis neque. Suspendisse nec mattis erat, a ornare erat. Aliquam tellus felis, tempor quis dictum vel, efficitur at turpis. Phasellus eu nisl tempus, efficitur arcu in, pellentesque neque. Vivamus eu gravida augue. Donec ultrices purus feugiat mi iaculis interdum. Suspendisse quam purus, venenatis et diam id, elementum interdum diam. Nullam vel ligula at felis mattis blandit. Duis eget turpis quis nibh laoreet mattis ac at ex. Suspendisse sollicitudin leo non dolor commodo, ac efficitur elit faucibus.

Fusce molestie quam vitae lacus eleifend vehicula. Morbi vel neque eleifend, pulvinar sapien at, interdum massa. Morbi tempor congue magna non gravida. Etiam varius lacus purus, ac laoreet sapien lobortis sit amet. Vestibulum at porta lorem. Ut quis tellus feugiat, vulputate nibh et, fringilla dolor. Integer non lectus auctor felis placerat vestibulum a vitae leo. Nulla euismod sit amet sem eu tristique.</p>

<p>Aliquam maximus massa eget arcu molestie viverra. Etiam odio arcu, gravida at augue sit amet, sollicitudin viverra sapien. Praesent gravida risus mi, non ultricies justo fermentum in. Donec ac lorem eu orci vulputate convallis. Quisque sagittis eros non rutrum dictum. Sed augue turpis, commodo ac purus a, volutpat tempor massa. Duis in urna a ligula porta elementum. Proin suscipit lectus id massa aliquam, eget porta metus fermentum.</p>

<p>Quisque volutpat dapibus tincidunt. Aenean ac velit egestas, varius ex vel, sollicitudin turpis. Praesent in augue eget lectus tempus posuere a malesuada neque. Cras vehicula est sit amet felis vulputate molestie. Duis vestibulum nisi metus, et pharetra erat dignissim id. Curabitur elementum mi at magna condimentum pharetra. Vestibulum cursus, odio at ultrices dignissim, eros leo finibus velit, a euismod dui nisl eu enim.</p>
		   <section id="section1-1">
		      <h2>Hello this is section 1.1</h2>
			  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisi dolor, tincidunt in magna at, porttitor lacinia velit. Nam sed volutpat ligula, vel euismod lorem. Duis commodo in justo sed commodo. Phasellus a vehicula libero, quis vulputate nisl. Phasellus pulvinar pellentesque vestibulum. Vivamus ut bibendum enim, at auctor odio. Phasellus ullamcorper, nisl vitae bibendum elementum, diam lectus sagittis nulla, et sagittis libero quam nec mauris. Maecenas quis gravida magna. Aenean feugiat erat non auctor tincidunt. Pellentesque lacus dui, faucibus at hendrerit condimentum, fermentum et purus. Nulla volutpat cursus risus sit amet porta. Sed nec finibus nisl, scelerisque blandit nisi. Mauris quis neque pretium, consequat leo vel, consequat sapien.</p>

<p>Proin consequat est sit amet cursus luctus. Donec consectetur neque nulla, lobortis ultricies neque aliquam in. Morbi non nibh quis ligula mollis feugiat. Nullam sagittis mi vitae auctor aliquam. Donec sodales justo erat, a malesuada ligula ultricies eget. Nam massa dolor, placerat ultricies metus eu, sagittis facilisis neque. Suspendisse nec mattis erat, a ornare erat. Aliquam tellus felis, tempor quis dictum vel, efficitur at turpis. Phasellus eu nisl tempus, efficitur arcu in, pellentesque neque. Vivamus eu gravida augue. Donec ultrices purus feugiat mi iaculis interdum. Suspendisse quam purus, venenatis et diam id, elementum interdum diam. Nullam vel ligula at felis mattis blandit. Duis eget turpis quis nibh laoreet mattis ac at ex. Suspendisse sollicitudin leo non dolor commodo, ac efficitur elit faucibus.

Fusce molestie quam vitae lacus eleifend vehicula. Morbi vel neque eleifend, pulvinar sapien at, interdum massa. Morbi tempor congue magna non gravida. Etiam varius lacus purus, ac laoreet sapien lobortis sit amet. Vestibulum at porta lorem. Ut quis tellus feugiat, vulputate nibh et, fringilla dolor. Integer non lectus auctor felis placerat vestibulum a vitae leo. Nulla euismod sit amet sem eu tristique.</p>

<p>Aliquam maximus massa eget arcu molestie viverra. Etiam odio arcu, gravida at augue sit amet, sollicitudin viverra sapien. Praesent gravida risus mi, non ultricies justo fermentum in. Donec ac lorem eu orci vulputate convallis. Quisque sagittis eros non rutrum dictum. Sed augue turpis, commodo ac purus a, volutpat tempor massa. Duis in urna a ligula porta elementum. Proin suscipit lectus id massa aliquam, eget porta metus fermentum.</p>

<p>Quisque volutpat dapibus tincidunt. Aenean ac velit egestas, varius ex vel, sollicitudin turpis. Praesent in augue eget lectus tempus posuere a malesuada neque. Cras vehicula est sit amet felis vulputate molestie. Duis vestibulum nisi metus, et pharetra erat dignissim id. Curabitur elementum mi at magna condimentum pharetra. Vestibulum cursus, odio at ultrices dignissim, eros leo finibus velit, a euismod dui nisl eu enim.</p>
		   </section>
		 </section>
		 <section id="section2">
		   <h2>Hello this is section 2</h2>
		   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisi dolor, tincidunt in magna at, porttitor lacinia velit. Nam sed volutpat ligula, vel euismod lorem. Duis commodo in justo sed commodo. Phasellus a vehicula libero, quis vulputate nisl. Phasellus pulvinar pellentesque vestibulum. Vivamus ut bibendum enim, at auctor odio. Phasellus ullamcorper, nisl vitae bibendum elementum, diam lectus sagittis nulla, et sagittis libero quam nec mauris. Maecenas quis gravida magna. Aenean feugiat erat non auctor tincidunt. Pellentesque lacus dui, faucibus at hendrerit condimentum, fermentum et purus. Nulla volutpat cursus risus sit amet porta. Sed nec finibus nisl, scelerisque blandit nisi. Mauris quis neque pretium, consequat leo vel, consequat sapien.</p>

<p>Proin consequat est sit amet cursus luctus. Donec consectetur neque nulla, lobortis ultricies neque aliquam in. Morbi non nibh quis ligula mollis feugiat. Nullam sagittis mi vitae auctor aliquam. Donec sodales justo erat, a malesuada ligula ultricies eget. Nam massa dolor, placerat ultricies metus eu, sagittis facilisis neque. Suspendisse nec mattis erat, a ornare erat. Aliquam tellus felis, tempor quis dictum vel, efficitur at turpis. Phasellus eu nisl tempus, efficitur arcu in, pellentesque neque. Vivamus eu gravida augue. Donec ultrices purus feugiat mi iaculis interdum. Suspendisse quam purus, venenatis et diam id, elementum interdum diam. Nullam vel ligula at felis mattis blandit. Duis eget turpis quis nibh laoreet mattis ac at ex. Suspendisse sollicitudin leo non dolor commodo, ac efficitur elit faucibus.

Fusce molestie quam vitae lacus eleifend vehicula. Morbi vel neque eleifend, pulvinar sapien at, interdum massa. Morbi tempor congue magna non gravida. Etiam varius lacus purus, ac laoreet sapien lobortis sit amet. Vestibulum at porta lorem. Ut quis tellus feugiat, vulputate nibh et, fringilla dolor. Integer non lectus auctor felis placerat vestibulum a vitae leo. Nulla euismod sit amet sem eu tristique.</p>

<p>Aliquam maximus massa eget arcu molestie viverra. Etiam odio arcu, gravida at augue sit amet, sollicitudin viverra sapien. Praesent gravida risus mi, non ultricies justo fermentum in. Donec ac lorem eu orci vulputate convallis. Quisque sagittis eros non rutrum dictum. Sed augue turpis, commodo ac purus a, volutpat tempor massa. Duis in urna a ligula porta elementum. Proin suscipit lectus id massa aliquam, eget porta metus fermentum.</p>

<p>Quisque volutpat dapibus tincidunt. Aenean ac velit egestas, varius ex vel, sollicitudin turpis. Praesent in augue eget lectus tempus posuere a malesuada neque. Cras vehicula est sit amet felis vulputate molestie. Duis vestibulum nisi metus, et pharetra erat dignissim id. Curabitur elementum mi at magna condimentum pharetra. Vestibulum cursus, odio at ultrices dignissim, eros leo finibus velit, a euismod dui nisl eu enim.</p>
		   <section id="section2-1">
		      <h2>Hello this is section 2.1</h2>
			  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisi dolor, tincidunt in magna at, porttitor lacinia velit. Nam sed volutpat ligula, vel euismod lorem. Duis commodo in justo sed commodo. Phasellus a vehicula libero, quis vulputate nisl. Phasellus pulvinar pellentesque vestibulum. Vivamus ut bibendum enim, at auctor odio. Phasellus ullamcorper, nisl vitae bibendum elementum, diam lectus sagittis nulla, et sagittis libero quam nec mauris. Maecenas quis gravida magna. Aenean feugiat erat non auctor tincidunt. Pellentesque lacus dui, faucibus at hendrerit condimentum, fermentum et purus. Nulla volutpat cursus risus sit amet porta. Sed nec finibus nisl, scelerisque blandit nisi. Mauris quis neque pretium, consequat leo vel, consequat sapien.</p>

<p>Proin consequat est sit amet cursus luctus. Donec consectetur neque nulla, lobortis ultricies neque aliquam in. Morbi non nibh quis ligula mollis feugiat. Nullam sagittis mi vitae auctor aliquam. Donec sodales justo erat, a malesuada ligula ultricies eget. Nam massa dolor, placerat ultricies metus eu, sagittis facilisis neque. Suspendisse nec mattis erat, a ornare erat. Aliquam tellus felis, tempor quis dictum vel, efficitur at turpis. Phasellus eu nisl tempus, efficitur arcu in, pellentesque neque. Vivamus eu gravida augue. Donec ultrices purus feugiat mi iaculis interdum. Suspendisse quam purus, venenatis et diam id, elementum interdum diam. Nullam vel ligula at felis mattis blandit. Duis eget turpis quis nibh laoreet mattis ac at ex. Suspendisse sollicitudin leo non dolor commodo, ac efficitur elit faucibus.

Fusce molestie quam vitae lacus eleifend vehicula. Morbi vel neque eleifend, pulvinar sapien at, interdum massa. Morbi tempor congue magna non gravida. Etiam varius lacus purus, ac laoreet sapien lobortis sit amet. Vestibulum at porta lorem. Ut quis tellus feugiat, vulputate nibh et, fringilla dolor. Integer non lectus auctor felis placerat vestibulum a vitae leo. Nulla euismod sit amet sem eu tristique.</p>

<p>Aliquam maximus massa eget arcu molestie viverra. Etiam odio arcu, gravida at augue sit amet, sollicitudin viverra sapien. Praesent gravida risus mi, non ultricies justo fermentum in. Donec ac lorem eu orci vulputate convallis. Quisque sagittis eros non rutrum dictum. Sed augue turpis, commodo ac purus a, volutpat tempor massa. Duis in urna a ligula porta elementum. Proin suscipit lectus id massa aliquam, eget porta metus fermentum.</p>

<p>Quisque volutpat dapibus tincidunt. Aenean ac velit egestas, varius ex vel, sollicitudin turpis. Praesent in augue eget lectus tempus posuere a malesuada neque. Cras vehicula est sit amet felis vulputate molestie. Duis vestibulum nisi metus, et pharetra erat dignissim id. Curabitur elementum mi at magna condimentum pharetra. Vestibulum cursus, odio at ultrices dignissim, eros leo finibus velit, a euismod dui nisl eu enim.</p>
		   </section>
		 </section>
	  </div>
   </div>
</div>

Answer 1

通常当你想使用某种锚点时，你会这样做：

<div id="last-news">...</div> //The div you want to reach

然后只需进行链接：

<a href="#last-news">... </a> //When you click on it the page will scroll to the div with the id last-news

检查＆＃34;锚点＃34;有关详细信息的元素：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

滚动到div中存在的部分

1 个答案: