Question

我正在创建一个横向滚动的网站。我正在使用this 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});
    });

});

以下是演示页面的link。这适用于Firefox（v18），Opera（v12），Safari（v5.1.2）甚至Internet Explorer 9，但它在Chrome（v24）中不起作用。

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

如果不这样做，请告诉我是否还有其他自动滚动的选项，它也支持水平滚动。

谢谢。

Answer 1

老问题，但我会记下我的经历。我从http://flesler.blogspot.com/2007/10/jqueryscrollto.html

下载的插件遇到了同样的问题

文章中的插件已过时，您可以在此处下载最新版本：https://github.com/flesler

此外，您还必须更改

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

到

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

Answer 2

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

快速尝试一下：

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

我还添加了alert('click')，以便您可以判断它是否已被检测到。

Answer 3

尝试使用px会滚动值

更改

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

到

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

Answer 4

错误在于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可以同样有效地应用于标记而不是冗余，这仍然有用...我在这个示例中只是这样做了因为有些用户注意到在DOM树上比ID更高的目标ID的问题...我无法亲自重现那个问题，所以嘿，无论哪种方式都有效！

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

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);
});

jQuery ScrollTo在Chrome中不起作用

4 个答案: