))короче я делаю сайт (одна стр). страница очень длинная. поставил кнопку to top (изображение), с ссылкой href="#top". а в топе я поставил <span id="#top"></span>. летит на вверх. всё ок. но когда он в top -е нужно чтобы кнопка исчезало... что делать??
спс заранее.
Спустя 27 минут, 15 секунд (6.10.2012 - 10:34) redreem написал(а):
если с использованием jQuery и jQuery.scrollto, то можешь глянуть как я делал: http://websyndicate.ru/
в исходном коде объект octoTOUP управляет всей этой фигней. теоретически можно выдрать этот объект и поставить себе и будет работать :) , в id надо указать id кнопки. В строке if (s > 300 ) {... 300-это количество пикселей скрола сверху, после которого появляется кнопка. Ну и инициализировать надо скрипт по загрузке DOM
и еще:
1. doc замени на document. это у меня сквозное сокращение для всех скриптов.
2. на кнопку повесь onclick="$.scrollTo('#top',500)
в исходном коде объект octoTOUP управляет всей этой фигней. теоретически можно выдрать этот объект и поставить себе и будет работать :) , в id надо указать id кнопки. В строке if (s > 300 ) {... 300-это количество пикселей скрола сверху, после которого появляется кнопка. Ну и инициализировать надо скрипт по загрузке DOM
$(document).ready(function(){
octoTOUP.init();
});
и еще:
1. doc замени на document. это у меня сквозное сокращение для всех скриптов.
2. на кнопку повесь onclick="$.scrollTo('#top',500)
Спустя 14 минут, 57 секунд (6.10.2012 - 10:49) Arh написал(а):
$(document).ready(function(){
$(".up").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 300){
$('.up').fadeIn();
} else {
$('.up').fadeOut();
}
});
$('.up').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
});
<div class="up">Вверх</div>
Спустя 5 минут, 39 секунд (6.10.2012 - 10:55) Arh написал(а):
| Цитата (temp8888 @ 6.10.2012 - 07:07) |
| <span id="#top"></span>. летит на вверх. всё ок. |
летит он просто так на верх, span роли не уграет, и в ссылке не обязательно писать #top,
можно просто #
<a href="#">
к тому же в span не нужно писать #
тоесть надо
<span id="top"></span>как мнимум
а по хорошему
<span id="top" name="top"></span>
иначе якорь у тебя не заработает.
Спустя 4 часа, 33 минуты, 45 секунд (6.10.2012 - 15:28) temp8888 написал(а):
Всё сделал)) проба решима))
во как сделал:
:D
во как сделал:
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
<style>
/*
Back to top button
*/
#back-top {
position: fixed;
bottom: 5px;
margin-left: 10px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 111px;
height: 27px;
display: block;
margin-bottom: 7px;
background: #ddd url(files/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
</style>
<a href="#top"><span></span></a>
:D