如何在html上向左滚动
How to scroll to left on html?
我正在建设一个单页网站。我有常见的网站内容,如:服务,作品集,联系方式,博客等。
如果有人点击"服务"、"作品集"answers"联系人"的导航菜单,它会滚动到用户想要的项目。通常这是上下滚动,所以没有问题。
我的想法是当用户想要访问博客时,它向右滚动或使博客从右向左推送效果。我知道我有办法了。问题是,当我在最后一节,也就是接触时,这是在这一页的底部。如果我想进入博客,它会滚动到顶部,然后向右滚动以查看博客。
我假装把滚动条移到顶部,只做一个右滚动条,从顶部看到博客部分。
你知道怎么处理这个吗?或者有一个独立的html文件会更好吗?
编辑
http://jsfiddle.net/VS9dS/20/从博客滚动到任何部分和/或从任何部分向上或向下移动。
$('html, body').animate({scrollLeft: -$(sectionName).offset().left}, "slow");
$('html, body').animate({scrollTop: $(sectionName).offset().top}, "slow");
从任意部分滚动到博客:
$('html, body').animate({scrollTop: $(sectionName).offset().top}, "slow");};
$('html, body').animate({scrollLeft: $(sectionName).offset().left}, "slow");
由于时间有限,我没有添加太多代码。现在我正在修改我的代码,如果我在联系人部分,我点击博客联系人它会滚动到顶部,然后向右滚动到博客部分,博客部分看起来像一个完全不同的html。我想让它做的是如果我在联系人栏点击到博客栏左滚动显示博客的顶部,同样的如果我在服务栏点击home
如果我没说错你只是想先把一个东西做成动画然后再把另一个做成动画,你可以这样做:
$('html, body').animate({
scrollTop: $(sectionName).offset().top
}, "slow", function () {
$('html, body').animate({
scrollLeft: $(sectionName).offset().left
}, "slow");
});
…或者我可以再试一次,你想在滚动到顶部之后向右滚动。然后你可以这样做:
$('a[href=#blog]').click(function () {
$('html, body').animate({
scrollTop: $('#home').offset().top
}, "slow", function () {
$('html, body').animate({
left: '-=200px'
}, "slow",'linear'); //looks better I guess
});
});
CSS: body {
position: relative;
}
小提琴:http://jsfiddle.net/Matze/eRNde/
http://api.jquery.com/animate/基本用法
相关文章:
- 让HTML元素充当停止滚动的锚点
- Android在HTML容器中滚动,该容器具有CSS溢出属性
- 在向下滚动JS/HTML/CSS wordpress网站时替换徽标图像
- 滚动所有嵌套的滚动条,使HTML元素进入视图
- 使文本仅滚动HTML页面的一部分
- 如何发现用户是否使用jQuery滚动到HTML容器的末尾
- 在html中的图像上滚动文本
- html表格的浮动水平滚动条
- CSS 溢出的滚动问题:滚动 HTML
- 如何用javascript滚动html中pdf对象元素的底部
- XY 滚动 HTML 表,带有垂直固定的标题
- Fancybox:如何滚动HTML片段,而不是具有相同效果的图像
- 滚动HTML电子邮件Listserv中的点击事件
- 滚动html页面中的mysql表内容
- 如何自动向下滚动html页面
- 当鼠标位于子可滚动HTML元素上时,如何使用鼠标滚轮移动父滚动条
- 如何以编程方式滚动HTML元素
- 向下滚动HTML图层
- 使用angular.js滚动HTML数据
- 滚动HTML元素的内容,而不是整个窗口对象