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()
سؤال
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>