使用jQuery实现平滑垂直滚动时遇到问题 [英] Trouble implementing Smooth Vertical scrolling with jQuery
问题描述
我正在构建一个连续滚动的网页,其导航应跳到页面上的其他位置.我正在尝试遵循该示例,并实现jQuery平滑滚动效果. HTML可以正常工作-单击该链接会将您带到页面上的其他位置,但是jQuery滚动效果不起作用.
I am building a webpage that is continuous scrolling, with a navigation that should jump to a different place on the page. I'm trying to follow this example, and implement a jQuery smooth scrolling effect. The HTML is working fine-- The links take you to a different spot on the page when clicked, but the jQuery scrolling effect is not working.
这是html的重要部分:
Here's the important part of the html:
<ul>
<li><a href="#"><h1>work</h1></a></li>
<ul class="nav">
<li><a href="#section1"><p class="nav_p">project1</p></a></li>
<li><a href="#section2"><p>project2</p></a></li>
<li><a href="#section3"><p>project3</p></a></li>
<li><a href="#section4"><p>project4</p></a></li>
<li><a href="#section5"><p>project5</p></a></li>
<li><a href="#section6"><p>project6</p></a></li>
<li><a href="#section7"><p>project7</p></a></li>
<li><a href="#section8"><p>project8</p></a></li>
</ul>
<li><a href="#"><h1>about</h1></a></li>
<li><a href="#"><h1>contact</h1></a></li>
</ul>
这是到目前为止的javascript :(它与顶部链接的教程网页上的内容完全相同)
And this is the javascript so far: (it is exactly the same as what's on the tutorial webpage linked up top)
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
任何人对为什么这对我不起作用有任何想法?谢谢!
Anyone have any ideas as to why this isn't working for me? Thank you!
推荐答案
我刚刚删除了'easeInOutExpo':
I just removed 'easeInOutExpo':
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500);
event.preventDefault();
});
});
这篇关于使用jQuery实现平滑垂直滚动时遇到问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!