Как сделать кнопку "На верх"
Как я пробовал:
$(document).scroll(showButToTop); // Событие function showButToTop() { var long = $('html').offset().top*-1; if(long > 1000) $('#toTop').stop().fadeIn(1).animate({ top : long+30}, 300); else $('#toTop').fadeOut(1); } |
да все гораздо гораздо проще....
в самом верху страницы - ставите якорь: <a name="toppage" id="toppage"></a> а в нужном месте кнопку с выполнением при нажатии: window.document.location = "#toppage"; или еще проще - гиперссылку на этот якорь и будет Вам, то что надо. |
а... или это я не о том?
|
попробуй так
<div id="top_link" class="top_link"><a href="#top">Подняться вверх</a></div> /* set variables locally for increased performance */ var scroll_timer; var displayed = false; var $top_link = $('#top_link'); var $window = $(window); var top = $(document.body).children(0).position().top; /* react to scroll event on window */ $window.scroll(function() { window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () { // use a timer for performance if($window.scrollTop() <= top) // hide if at the top of the page { displayed = false; $top_link.fadeOut(500); } else if(displayed == false) // show if scrolling down { displayed = true; $top_link.stop(true, true).fadeIn(500); } }, 100); }); $top_link.find('a').click(function(e) { e.preventDefault(); $(this).parent().fadeOut(500); $("html:not(:animated),body:not(:animated)").animate({ scrollTop : 0 }, 300); }); |
Так нужен какой то анимационный эффект?
Если нет то средствами html Например <a href="#top">на верх</a> а в самом верху страницы вешаешь элемент с ай ди top Например <div id="top"></div> теперь при клике на ссылку будет сразу поднимать до элемента див с ай ди топ. А если анимация, то это уже другой вопрос)) но тоже решаемый! |
$(document).ready(function(){ $(window).scroll(showButtotToTop); $('#toTop').click(function() { $('html,body').animate({ scrollTop: 0}, 1000 ); }); }); function showButtotToTop() { var long = $('html').offset().top*-1; if(long > 1000) $('#toTop').stop().show().animate({ top : long+10}, 750); else $('#toTop').hide(); } |
После обеда сегодня попробую реалтзовать задуманное)
|
Смещение страницы.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Denys Duvanov 0931454574.blogspot.com</title> <!--<link href="img/styles.css" rel="stylesheet" type="text/css" /> --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $(".scroll").click(function(event){ // останавливаем действие ссылки event.preventDefault(); //получаем урл, ну это если несколько захотите разместить, например топы в каждом параграфе, вернуться в топ.сейчас закоментил для удобства. var full_url = this.href; //это делаем идентификатор на каждый топ var parts = full_url.split("#"); var trgt = parts[1]; //движемся к якорю var target_offset = $("#"+trgt).offset(); var target_top = target_offset.top; // тут думаю ясна анимация $('html, body').animate({scrollTop:target_top}, 500); }); }); </script> <style type="text/css"> .top { background-image: url(top.png); background-repeat: no-repeat; float: left; height: 48px; width: 950px; padding-bottom: 35px; background-position: bottom; margin-bottom: 20px; } .top p { text-align: center; color: #999999; font-size: 10px; top:1000px; /*<!--//указатель места-->*/ position:relative; /*<!--// обязательно, иначе не будет работать цсс топ-->*/ } a:link { color: #666666; } a:visited { color: #666666; } a:hover { color: #000000; } a:active { color: #666666; } </style> </head> <body> <div id="top"> <div id="gallery"> <h1>Gallery <br /> <span class="description">This is the Gallery Page</span></h1> </div><!--gallery ends--><!--top ends--><!--portfolio ends--><!--top ends--><!--contact ends--> <div class="top"> <p><a href="#top" class="scroll">Back To Top</a></p> </div><!--top ends--> </div><!--container ends--> </body> </html> В общем планенькое смещение к якорю. Желательно ответить , то ли это, что нужно? |
Часовой пояс GMT +3, время: 06:49. |