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 {1}}可见。
水平滚动 - http://jsfiddle.net/ZqSSm/2/ - 请注意#horizontalwrap的宽度是2400px，但只有第一个500px可见

如果您需要更多帮助，请告诉我一行，我会尽我所能！首次使用ScrollTo对我来说很头疼！

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

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

1 个答案: