Question

我有一个jsfiddle，可以在这里看到：http://jsfiddle.net/pg3n9/2/

当你使用它时，你会看到我的滚动功能正常工作，但是当我尝试使用我的真实代码实现它时，我的滚动链接都不起作用！？

这是我需要帮助的html / css / javascript代码，如果你能以任何方式提供帮助，那就太棒了！如果有类似的问题，我很抱歉，我只是想知道我用html实现我的javascript时做错了什么

罗文，

    <!DOCTYPE html>
<html>
    <head>
        <title> Tongue n Cheek </title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link rel="stylsheet" type="text/css" href="css/index.css" />
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,300' rel='stylesheet' type='text/css'>
    </head>
    <body>

    <div id="cbp-fbscroller" class="cbp-fbscroller">

    <section id="fbsection1"><section class="topheader">
    <div class="navigation">
        <a class="menu_link"href="#fbsection2"> scroll down </a>
        <a id="email" href="mailto:contact@tongue-n-cheek.com.au?Subject:Message%20From%20Your%20Website">Email</a>
        <a id="soundcloud" href="https://soundcloud.com/tongue-n-cheek" target="_blank">Sound Cloud </a>
        <a id="facebook" href="https://www.facebook.com/tonguencheekofficial" target="_blank" alt="facebook"> Facebook </a>


        </div>

        </div>
    </section>
    <section id="fbsection2" name="fbsection2" alt="section2">

    </div>

     </section>
    <section id="fbsection3" name="fbsection3" alt="section3">
    </section>
    </body>
    <style type="text/css">
    html, body, 
.container,
.cbp-fbscroller,
.cbp-fbscroller section { 
    height:100%; 
    width:100%;
    padding:0;
    margin:0;
    border:0;
}


/* The nav is fixed on the right side  and we center it by translating it 50% 
(we don't know it's height so we can't use the negative margin trick) */


/* background-attachment does the trick */
.cbp-fbscroller section {
    position: relative;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.no-touch .cbp-fbscroller section {
    background-attachment: fixed;
}

#fbsection1 {
    background:url(img/top.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;

}

#fbsection2 {
    background:white;
    height:100%;
}

#fbsection3 {
    background:#1c1c1c;
    height:100%;
    width:100%;
}
body{ background:#1c1c1c;
}
input[type=submit] {
    /* Size and position */
    width: 50%;
    margin-top:50%;
    float:right;
    padding: 8px 5px;
    position:center;

    /* Styles */
    background: #3487FF;    

    border: 1px solid #4e3043;

    cursor: pointer;
    transition: all 0.3s ease-out;

    /* Font styles */
    color: white;
    margin-right:25%;
    font-size: 16px;

    font-family: 'Raleway', 'Lato', Arial, sans-serif;
}

email , a {
    text-decoration:none;
    color:white;
    padding:0;
    top:0px;
    z-index:10;
    font-family:'Raleway', Helvetica;
    float:right;
    margin-right:20px;
    transition:0.3s;
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
    -o-transition:0.3s;
    margin-right:35px;
}
a:hover { 
    opacity:0.75; 

}
#text {
    float:right;
    font-family:'Raleway', Helvetica;
    color:black;
    font-size:26px;
    margin-right:30px;
}
    </style>

<script type="text/javascript">
    $(document).ready(function() {

    $('a.menu_link').bind('click',function(event){

        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 60
        }, 1500,'easeInOutExpo', function() {

            window.location.hash = $anchor.html();

        });

        event.preventDefault();

    });

});



</script>

</html>

Answer 1

您缺少jQuery UI

以下是您的代码工作示例：http://jsfiddle.net/acidrat/yGxhc/1/

所以请在您的

部分中加入此内容

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

查看左侧“框架和扩展”中的jsFiddle工具栏，您可以看到我必须启用jquery ui

Answer 2

您必须添加一个div容器来滚动文本。我更新了您的jsFiddle

calcolate scrollTop值的正确方法：

scrollTop: $($anchor.attr('name')).offset().top - $('#container').offset().top + $('#container').scrollTop()

Answer 3

如果您使用file：// protocol查看PC上的站点，请不要使用协议相对URL，因为这也是浏览器将用于jQuery的协议，因此无法找到。使用http应该可以解决您的问题。并且，还包括用于您正在使用的easeIn效果的jQueryUI。就是这样！

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

为什么我的Javascript / Jquery代码不起作用

3 个答案: