如何在html上向左滚动

How to scroll to left on html?

本文关键字:滚动 html      更新时间:2023-09-26

我正在建设一个单页网站。我有常见的网站内容,如:服务,作品集,联系方式,博客等。

如果有人点击"服务"、"作品集"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/基本用法