1

我正在建立一个单页网站。我有常见的网站内容，例如：服务、投资组合、联系人、博客等。

如果有人单击“服务”、“投资组合”和“联系人”的导航菜单，它会滚动到用户想要的项目。通常这是上下滚动，所以没有问题。

我的想法是当用户想要访问博客时，它会向右滚动或使博客从右到左产生推送效果。知道我有一些工作。问题是当我在最后一个部分，即联系时，它位于页面底部。如果我想访问博客，它会滚动到顶部然后向右滚动以查看博客。

我假装将滚动条移到顶部，然后向右滚动并从顶部查看博客部分。

关于如何处理这个的任何想法？或者有一个独立的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。我想做的是，如果我在联系部分并点击博客，只需向左滚动并显示博客的顶部，如果我在服务上，同样的方式，家

4

1 回答 1

0

如果我说得对，并且您只想先为一件事制作动画，然后再为另一件事制作动画，则可以执行以下操作：

$('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/#basic-usage

于 2013-06-02T21:57:07.570 回答