Question

我在网络制作方面学习，我需要做一个视差网站。我实现了使背景在需要的地方滚动得更慢，但是我想通过标题中的按钮来改进它，这会使页面滚动到选择的Div，而不仅仅是＆＃34; teleport＆＃34;你在那里。

所以这是标题的HTML：

<header>
    <h1>Stalwarts</h1>
    <div id='taskbar'>
        <a href="#p" class="scrollTo">Go to section 1</a>
        <a href="#d" class="scrollTo">Go to section 2</a>
        <a href="#t" class="scrollTo">Go to section 3</a>
        <a href="#q" class="scrollTo">Go to section 4</a>
    </div>
</header>

还有我的CSS：

header{
position: fixed;
padding-top: 0.4%;
padding-bottom: 0.4%;
top: 0;
width: 100%;
height: auto;
z-index: 55;
}

我想知道如何制作JS或JQuery来使其工作，并请如何集成它。如果需要插件，你能帮我安装一下吗？我刚开始使用JQuery和JS！： - ）

谢谢你，克里斯托夫

Answer 1

搜索＆＃34; jquery视差滚动＆＃34;在谷歌找到了这个。 http://prinzhorn.github.io/skrollr/

Answer 2

如果您已经使用了jquery，则可以使用$.animate函数。如下所示：

$('html, body').animate({
    scrollTop: $(".section").eq(sectionIndex).offset().top
}, 2000);

以下是jsfiddle的示例。

制作<a> scrolling to a Div</a>

2 个答案: