Why won't my Javascript/ Jquery code work

StackOverflow https://stackoverflow.com/questions/23245998

문제

I have a jsfiddle which can be seen here : http://jsfiddle.net/pg3n9/2/

When you use it, you will see that my scroll functions work fine, but when I try to implement it with my real code, none of my scroll links work!?!

This is my html/css/javascript code that I need help on, if you would be able to help in any way, that would be great ! I apologize if there are similar questions out there, I would just love to know what I am doing wrong when implementing my javascript with my html

Rowan,

    <!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>
도움이 되었습니까?

해결책 2

You have to add a div container in which to scroll your text. I updated your jsFiddle

proper way to calcolate the scrollTop value:

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

다른 팁

You are missing the jQuery UI

Here is an example of your code working: http://jsfiddle.net/acidrat/yGxhc/1/

So just include this in your section

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

Look in the jsFiddle Toolbar on the left "Frameworks & Extensions" and you can see that i had to enable jquery ui

Don't use the protocol-relative URL if you are viewing the site on your PC using file:// protocol because that's the protocol the browser will use for jQuery too and therefore cannot find. Using http should fix your problem. And, also include jQueryUI for the easeIn effect that you are using. That's it!

<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>

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top