jquery - jquery scrollTo + wordpress 问题（水平滑动布局）

Question

基本上我试图制作一个水平滑动的一页布局。我挣扎了几个小时，仍然不知道我做错了什么。

JQuery 和 scrollTo 包含在之前<?php wp_head(); ?>（按正确顺序），我检查了两次可能的拼写错误。

Gere 是我的 html 标记：

<div class="nav">
<a class="menu" href="#main">main</a>
<a class="menu" href="#bio">bio</a>
<a class="menu" href="#film">film</a><br>
</div>

<div id="wrap">
<div id="mask">
    <div class="panel" id="main"> </div>
    <div class="panel" id="bio"> </div>
    <div class="panel" id="film"> </div>
</div>
</div>

这是脚本：

<script type='text/javascript'>
$(document).ready(function() {
$('a.menu').click(function () {

    $('a.menu').removeClass('active');
    $(this).addClass('active');

    current = $(this);

    $('#wrap').scrollTo($(this).attr('href'), 800);     

    return false;
});

});

</script>   

我试图将这个脚本放在网站上的任何地方，但我仍然无法让它工作。

Answer 1

您有基本的想法，但我认为问题在于您如何设置可滚动面板及其容器。

以您上面的代码为例，我实现了一个基本的 ScrollTo 滑动布局：

• 垂直滚动- http://jsfiddle.net/ZqSSm/1/ - 注意高度#mask是2400px（800px * 3），但只有第一个500px是可见的。

• 水平滚动- http://jsfiddle.net/ZqSSm/2/ - 注意 的宽度如何#horizontalwrap，2400px但只有第一个500px可见。

如果您需要更多帮助，请给我留言，我会尽力而为！ScrollTo 在第一次使用时让我很头疼！

请注意，在您的网站上加载 JS 文件也存在一些问题。我不知道原因，但打开 chrome 的开发者控制台或萤火虫会让你看到发生了什么。