Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.05.2011, 18:57
Аватар для dimaan777
Аспирант
Отправить личное сообщение для dimaan777 Посмотреть профиль Найти все сообщения от dimaan777
 
Регистрация: 07.11.2010
Сообщений: 66

Как сделать кнопку "На верх"
Как я пробовал:
$(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);
}
Ответить с цитированием
  #2 (permalink)  
Старый 04.05.2011, 15:38
Интересующийся
Отправить личное сообщение для Lucidmind Посмотреть профиль Найти все сообщения от Lucidmind
 
Регистрация: 29.04.2011
Сообщений: 13

да все гораздо гораздо проще....

в самом верху страницы - ставите якорь:

<a name="toppage" id="toppage"></a>

а в нужном месте кнопку с выполнением при нажатии:
window.document.location = "#toppage";

или еще проще - гиперссылку на этот якорь



и будет Вам, то что надо.
Ответить с цитированием
  #3 (permalink)  
Старый 04.05.2011, 15:40
Интересующийся
Отправить личное сообщение для Lucidmind Посмотреть профиль Найти все сообщения от Lucidmind
 
Регистрация: 29.04.2011
Сообщений: 13

а... или это я не о том?
Ответить с цитированием
  #4 (permalink)  
Старый 04.05.2011, 20:50
Новичок на форуме
Отправить личное сообщение для Leprik Посмотреть профиль Найти все сообщения от Leprik
 
Регистрация: 04.05.2011
Сообщений: 1

попробуй так
<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);
	});
Ответить с цитированием
  #5 (permalink)  
Старый 05.05.2011, 11:02
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

Так нужен какой то анимационный эффект?
Если нет то средствами html
Например
<a href="#top">на верх</a>

а в самом верху страницы вешаешь элемент с ай ди top
Например
<div id="top"></div>

теперь при клике на ссылку будет сразу поднимать до элемента див с ай ди топ.
А если анимация, то это уже другой вопрос)) но тоже решаемый!
__________________
XYZ
Ответить с цитированием
  #6 (permalink)  
Старый 06.05.2011, 23:11
Аватар для dimaan777
Аспирант
Отправить личное сообщение для dimaan777 Посмотреть профиль Найти все сообщения от dimaan777
 
Регистрация: 07.11.2010
Сообщений: 66

$(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();
}
Ответить с цитированием
  #7 (permalink)  
Старый 08.05.2011, 02:58
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

После обеда сегодня попробую реалтзовать задуманное)
__________________
XYZ
Ответить с цитированием
  #8 (permalink)  
Старый 08.05.2011, 14:16
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

Смещение страницы.
<!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>


В общем планенькое смещение к якорю.

Желательно ответить , то ли это, что нужно?
__________________
XYZ
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать fullscreen -=1100=- Общие вопросы Javascript 8 30.07.2012 09:53
Как сделать кнопку, запускающую rrdtool jsx Общие вопросы Javascript 2 20.02.2011 13:40
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Как сделать кнопку очистить? sss2019 Общие вопросы Javascript 10 10.10.2010 14:56
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19