3

我正在创建一个水平滚动的网站。我正在使用这个jQuery 插件进行自动滚动。下面是代码。

HTML

<head>
<link type="text/css" rel="stylesheet" href="stylesheets/styles.css" />

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<div id="container">

<div id="navigation">
    <ul>
        <li>
            <div class="menubutton" id="homeLink"><a class="menuitem" href="#"></a></div>
        </li>
        <li>
            <div class="menubutton" id="aboutLink"><a class="menuitem" href="#"></a></div>
        </li>
        <li>
            <div class="menubutton" id="musicLink"><a class="menuitem" href="#"></a></div>
        </li>
    </ul>
</div><!-- end of navigation -->


<div id="firstMark"></div>

<div id="secondMark"></div>

<div id="thirdMark"></div>

</div>

</body>
</html>

CSS

@charset "utf-8";

ul li { list-style-type:none; }

/* navigation */
#navigation { position:fixed; z-index:5; bottom:80px; left:-26px; background-color:#FFF; width:70px; height:190px; border-top-right-radius:10px; border-bottom-right-radius:10px; }

.menubutton { float:left; width:20px; height:20px; border-radius: 50%; background-color:#F00; margin-bottom:15px; }

.menubutton:hover { cursor:pointer; }

#homeLink { background-color:#007FD2; }
#aboutLink { background-color:#C7007A; }
#musicLink { background-color:#FFDB1A; }
#brandsLink { background-color:#000; }
#contactLink { background-color:#F90; }

#homeLink:hover { background-color:#006DB4; }
#aboutLink:hover { background-color:#99005E; }
#musicLink:hover { background-color:#FFC61A; }
#brandsLink:hover { background-color:#333; }
#contactLink:hover { background-color:#F60; }


#container {
    position:absolute;
    width:10000px;
    height:100%;
    background-color:#FFC;  
    top:0;
    left:0;
}

#firstMark {
    position:absolute;
    width:1px;
    height:1px;
    left:3000px;    
}

#secondMark {
    position:absolute;
    width:1px;
    height:1px;
    left:6000px;    
}

#thirdMark {
    position:absolute;
    width:1px;
    height:1px;
    left:9000px;    
}

JavaScript

$(document).ready(function(e) {

    $('#homeLink').click(function(e) {
        e.preventDefault();
        $.scrollTo(0,0, {duration: 2000});
    });

    $('#aboutLink').click(function(e) {
        e.preventDefault();
        $.scrollTo('#firstMark', {duration: 2000});
    });

    $('#musicLink').click(function(e) {
        e.preventDefault();
        $.scrollTo('#secondMark', {duration: 2000});
    });

});

这是演示页面的链接。这适用于 Firefox(v18)、Opera(v12)、Safari(v5.1.2) 甚至 Internet Explorer 9，但不适用于 Chrome(v24)。

谁能告诉我这里缺少什么？是我的代码有问题还是插件中的错误？

如果做不到这一点，请告诉我是否还有其他支持水平滚动的自动滚动替代方案。

谢谢你。

4

4 回答 4

4

老问题，但我会写下我的经验。我从http://flesler.blogspot.com/2007/10/jqueryscrollto.html下载的插件也有同样的问题

文章中的那个插件已经过时了，你可以在这里下载最新版本：https ://github.com/flesler

你也必须改变

$.scrollTo(0,0, {duration: 2000});

至

$.scrollTo("0px","0px", {duration: 2000});

于 2013-05-02T08:02:20.700 回答
2

您的主播可能正在接收click事件而不是 div。

快速尝试一下：

$('#homeLink a').click(function(e) {
    e.preventDefault();
    alert('click');
    $.scrollTo(0,0, {duration: 2000});
});

我也添加了一个alert('click')，这样你就可以判断它是否被检测到。

于 2013-01-27T09:17:13.947 回答
1

尝试使用 px 将滚动值

改变

 $.scrollTo(0,0, {duration: 2000});

至

 $.scrollTo(0px,0px, {duration: 2000});
于 2013-01-27T09:17:12.217 回答
0

错误在于 webkit 能够为身体设置动画。相反，在 body 内部创建一个 div 并将动画应用于此...

<body>
    <div class="wrapper">
        <nav>
            <a class="scroll-to-id" href="#" data-target="section1">Section 1</a>
            <a class="scroll-to-id" href="#" data-target="section2">Section 2</a>
        </nav>
        <section>
            <a id="section1">&nbsp;</a>
            <p>Some content<p>
        </section>
        <section>
            <a id="section2">&nbsp;</a>
            <p>Some more content<p>
        </section>
    </div>
</body>

注意：根据我的个人经验，ID 可以同样有效地应用于标签而不是冗余，这仍然有效......我在这个示例中只这样做了，因为一些用户注意到定位 ID 更高的问题DOM 树比这...我不能亲自重现这个问题，所以嘿，无论哪种方式都有效！

然后设置包装元素和主体的样式以正确运行

body { position:relative; }

.wrapper { overflow:auto; position:absolute; top:0; height:100%; width:100%; }

然后是 jQuery

$('.scroll-to-id').on('click', function(event) {
    event.preventDefault();
    var target = "#" + $(this).data('target');
    $('.wrapper').animate({
        scrollTop: $(target).offset().top
    }, 1500);
});
于 2014-02-26T16:49:22.563 回答