HTML5/jQuery - 垂直页面滑动
我已经看到他们在顶部有一些链接的网站,并且当您单击示例第一个链接时,您将在页面上向下滚动(向下滚动效果)你点击了id(#)。 (带有链接的菜单在您后面)。然后,您可以点击另一个链接,然后您将进一步浏览页面。HTML5/jQuery - 垂直页面滑动
我不能为这项技术命名,我的垂直页面滑动搜索没有返回我所希望的。
Tumblr.com有这样的事情,只是不完全是我在找什么。 http://www.w3.org/html/logo也有类似这样的东西,这里丢失的唯一东西就是下面的菜单,当页面滚动时。
谁能帮我解释一下吗?或者举几个例子?
在此先感谢!
所有你要做的就是垂直想要的元素的偏移滚动到,然后为window
元素(或您正在滚动的任何元素)设置scrollTop
属性的动画:
//bind to all links whose `href` attribute starts with a hash
$('a[href^="#"]').on('click', function() {
//get the offset from the document's top for the element targeted in the links `href` attribute
var offset = $($(this).attr('href')).offset().top;
//scroll the document, some browsers use `html`, some use `body`
$('html, body').stop().animate({ scrollTop : offset }, 1000);
});
这里是一个演示:http://jsfiddle.net/wCgA7/1/
请注意,如果你给导航position:fixed
您可以将其停靠在视口的顶部。
我明白了!非常感谢。一个问题,但。我看到固定项目是..固定的。但是我怎样才能产生效果,当屏幕变得更高时,固定项目“粘”到页面的顶部。具有Jquery效果。如果你明白我的意思。 – oliverbj 2012-03-15 19:55:08
我一直在使用这个JQuery
代码修改后的版本:
// animate to anchor link
$('nav a').click(function() {
$('nav li').removeClass('selected');
$(this).parent().addClass('selected');
var elementClicked = $(this).attr("href");
var destination = $(elementClicked).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 500);
return false;
});
// update active links on scroll
$(window).scroll(function(){
var pos = $(window).scrollTop();
var height = $(window).height();
$('nav li').each(function(){
if((pos >= $(this).offset().top)){
$('nav li').removeClass();
$(this).addClass('selected');
}
});
});
有你看着,你所看到的网页的脚本。这应该有助于您构建自己的解决方案。 – 2012-03-15 19:40:13