我想在单击导航div ID内的任何链接或(如果可能)单击包含导航链接的div ID本身中的任何位置时,将页面滚动到例如导航div ID的顶部。
我已经研究过了,最接近的是jQuery-单击时如何将锚点滚动到页面顶部?但是由于某种原因,当我在示例中尝试执行此操作时,它似乎不起作用。我究竟做错了什么?
我是jQuery的新手,并且在html和css方面是中等的(并且使用了div的内联样式,因为我不想仅为示例提供单独的css)。
当我从jQuery加载html和脚本时-如何在单击时将锚点滚动到页面顶部?在Aptana中,它也不滚动。即使div类上方有一个内容div,它也有空间可以滚动到所有位置。
我在有关的div中包括了两个小段,以准确解释我的意思。
很感谢任何形式的帮助。谢谢。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#scroll_navigation ul li').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
</script>
<body>
<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div>
<div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599">
<p>Scroll navigation to top of page</p>
<p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p>
<div id="navigation">
<div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000">
<ul>
<p>Catch clicks on anchors to scroll the div id to the top of the page</p>
<li><a href="#Portfolio" title="">Portfolio</a></li>
<li><a href="#Services" title="">Services</a></li>
<li><a href="#About" title="">About</a></li>
<li><a href="#Contact" title="">Contact</a></li>
</ul>
</div>
</div>
</div>
<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div>
</body>
编辑在Firefox中使用scrollTop时要当心。Animate scrollTop在firefox jQuery中不起作用jQuery scrollTop-Mozilla / Firefox中不支持负值花了我一段时间才能弄清楚我的代码还可以,但是scrollTop是FF中的问题。在同一示例中,也可以观察到该行为。向下滚动并固定锚点时,FF将向上滚动到目标div之前或之后2-4px的随机位置。
我现在正在使用Scrolld.js在主要浏览器上实现像素完美滚动到所需的点。据我所知,我不了解不同的浏览器引擎如何通过不同的输入(html或body)来呈现诸如通用滚动条之类的普通东西,而我是jQuery的新手。猜测这不是jQuery的“错误”,而是浏览器引擎如何呈现scrollTop。
我不知道您是否这样做,但是您必须包括jquery才能使用它。另一件事是,您的“点击监听器”必须在jqueries文档就绪函数中,如下所示:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#scroll_navigation ul li').on('click', function(){
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
});
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句