dylan75
04-27-2011, 06:34 AM
Hello all kind people
I have this scroll to top code, but to edit it need some help.
the problem is that I will not see this eksamplen the page evry time, would like to reach all the way down on the side to be displayed.
Thanx for all comment and help :)
Here is Scroll to Top code:
<script type="text/javascript">
$(document).ready(function() {
$('.top').addClass('hidden');
$.waypoints.settings.scrollThrottle = 30;
$('#wrapper').waypoint(function(event, direction) {
$('.top').toggleClass('hidden', direction === "up");
}, {
offset: '-100%'
}).find('#main-nav-holder').waypoint(function(event, direction) {
$(this).parent().toggleClass('sticky', direction === "down");
event.stopPropagation();
});
});
</script>
<a class="top" href="#" title="Back to top">Top</a>
SCC code:
.top {
position:fixed;
right:15px;
bottom:15px;
width:50px;
height:25px;
padding-top:25px;
line-height:25px;
background:#333;
color:#888;
display:block;
text-transform:uppercase;
text-decoration:none;
text-align:center;
font-size:14px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
behavior:url(../PIE.htc);
}
.top:before {
position:absolute;
top:11px;
left:14px;
content:"";
border-bottom:11px solid #888;
border-left:11px solid transparent;
border-right:11px solid transparent;
}
.top:hover {
color:#fff;
}
.top:hover:before {
border-bottom-color:#fff;
}
.opacity .top {
opacity:1;
-webkit-transition:opacity 700ms linear;
-moz-transition:opacity 700ms linear;
transition:opacity 700ms linear;
}
.opacity .top.hidden {
opacity:0;
}
.no-opacity .top.hidden {
display:none;
}
I have this scroll to top code, but to edit it need some help.
the problem is that I will not see this eksamplen the page evry time, would like to reach all the way down on the side to be displayed.
Thanx for all comment and help :)
Here is Scroll to Top code:
<script type="text/javascript">
$(document).ready(function() {
$('.top').addClass('hidden');
$.waypoints.settings.scrollThrottle = 30;
$('#wrapper').waypoint(function(event, direction) {
$('.top').toggleClass('hidden', direction === "up");
}, {
offset: '-100%'
}).find('#main-nav-holder').waypoint(function(event, direction) {
$(this).parent().toggleClass('sticky', direction === "down");
event.stopPropagation();
});
});
</script>
<a class="top" href="#" title="Back to top">Top</a>
SCC code:
.top {
position:fixed;
right:15px;
bottom:15px;
width:50px;
height:25px;
padding-top:25px;
line-height:25px;
background:#333;
color:#888;
display:block;
text-transform:uppercase;
text-decoration:none;
text-align:center;
font-size:14px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
behavior:url(../PIE.htc);
}
.top:before {
position:absolute;
top:11px;
left:14px;
content:"";
border-bottom:11px solid #888;
border-left:11px solid transparent;
border-right:11px solid transparent;
}
.top:hover {
color:#fff;
}
.top:hover:before {
border-bottom-color:#fff;
}
.opacity .top {
opacity:1;
-webkit-transition:opacity 700ms linear;
-moz-transition:opacity 700ms linear;
transition:opacity 700ms linear;
}
.opacity .top.hidden {
opacity:0;
}
.no-opacity .top.hidden {
display:none;
}