Форум

dimaan777 · #1 (**permalink**) 03.05.2011, 18:57

Как я пробовал:

$(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);
}

Lucidmind · #2 (**permalink**) 04.05.2011, 15:38

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

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

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

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

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

и будет Вам, то что надо.

Lucidmind · #3 (**permalink**) 04.05.2011, 15:40

а... или это я не о том?

Leprik · #4 (**permalink**) 04.05.2011, 20:50

<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);
	});

0931454574 · #5 (**permalink**) 05.05.2011, 11:02

Так нужен какой то анимационный эффект?
Если нет то средствами html
Например

<a href="#top">на верх</a>

а в самом верху страницы вешаешь элемент с ай ди top
Например

<div id="top"></div>

теперь при клике на ссылку будет сразу поднимать до элемента див с ай ди топ.
А если анимация, то это уже другой вопрос)) но тоже решаемый!

dimaan777 · #6 (**permalink**) 06.05.2011, 23:11

$(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();
}

0931454574 · #7 (**permalink**) 08.05.2011, 02:58

После обеда сегодня попробую реалтзовать задуманное)

0931454574 · #8 (**permalink**) 08.05.2011, 14:16

<!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>

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

Желательно ответить , то ли это, что нужно?

Форум

Справочник

Discord чат

Курсы javascript