Przycisk 'do góry' na stronie

Witam,

Jak uzyskać efekt pojawienia się przycisku tkz. do góry po przejechaniu danej wartości scrollem ?

i jak taki przycisk wykonać ? samym html i odnośnik do diva ? czy skrypt ?

Proszę o pomoc,

Pozdrawiam.

może tobie chodzi o skróty klawiszowe jak tak to łap http://www.dobreprogramy.pl/deepone/Skr … 21684.html

nie, nie chodziło mi o skróty.

Już tłumaczę o co dokładnie.

Mam stronę która jest ‘wysoka’ i np. tak jak tutaj http://live99.pl

po prawej na dole jest przycisk do góry.

Jak zrobić taki przycisk, ale żeby pojawiał się dopiero po zjechaniu w dół scrollem o określoną wartość pixeli.

Witaj

Zapewne chodzi ci o to:

http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

Dziękuję bardzo :wink: o to dokładnie chodziło.

To rozwiązanie wydaje mi się najlepsze, ponieważ jest to przesuwanie płynne, w necie są również inne, ale te zazwyczaj bazują na “skoku” bezpośrednio do góry.

jeszcze tylko muszę zaimplementować to do swojej strony, ale myślę, że z tym nie będzie problemu.

a co do rozwiązania to tak, jest bardzo dobre.

Obrazek “do góry” musisz w pliku scrolltopcontrol.js podać mu odpowiednią ścieżkę aby został poprawnie wyświetlony, dokładnie chodzi o tą linijkę"

controlHTML: '', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"[/code]


a wyskoość od której ma się pojawić ten obrazek w linijce powyżej, którą zapisałem wyżej dokładnie to tu :

[code]startline:100,

Aż tyle kodu, by przewinąć stronę do góry??? Niesamowici ci programiści są ;]. Moje jest prostsze: http://freedots.home.pl/_testy/gts_last/ Jak ktoś zainteresowany, mogę udostępnić kod :).

Jest coś takiego, jak etykieta:

opis odsyłacza

(...)
(opis etykiety)[/code]

Sądzę, że z powodzeniem można stosować to rozwiązanie, wystarczy jedynie podlinkować sobie na dole jakąś grafikę, np. ze strzałką.

Moje rozwiązanie jest mniej więcej takie:

JS

function scrollTo(el, dly)

{

	var wsTop = jQuery(window).scrollTop();

	var epTop = 0;

	var elTop = 0;

	var dly = Number(dly) ? dly : 0;

	var div = jQuery(document).height() > jQuery(window).height() ? Math.ceil(jQuery(document).height()/jQuery(window).height()) : 1;

	var tme = 1024/div;

/* Jeśli nie używamy LightBox, można ten kod usunąć */

	var oLb = document.getElementById('lightbox');

	if (oLb && (jQuery(oLb).css('display') != "none") && (typeof myLightbox != "undefined"))

	{

		myLightbox.end();

	}


	if (el != "undefined")

	{

		epTop = Math.ceil(jQuery(el).position().top);

		elTop = (epTop>13) ? epTop-13 : 0;

	}


	if (wsTop || elTop)

	{

		jQuery('html,body').delay(dly).animate(

		{

			scrollTop: elTop ? (elTop-(wsTop ? 1 : 0)) : 0

		}, tme, 'easeOutQuint'); // Potrzebny plik `jquery.easing.1.3.js`

	}

}


var eS = 0;


jQuery(document).ready(function(){

	eS = (eID = window.location.hash.replace('#', '')) ? document.getElementById(eID) : 0;


	if (eS)

	{

		jQuery('html,body').delay(0).animate({

			scrollTop: 0

		}, 0);

	}


	dBP = document.createElement('p');

	jQuery(dBP).attr({'id': "skip_t"}).css('display', "none").html('Góra ↑').appendTo('body');


	jQuery(window).scroll(function () {

		if ((jQuery(dBP).css('display') == "none") && (jQuery(this).scrollTop() > 0))

		{

			jQuery(dBP).delay(0).fadeTo(192, 1);

		}

		else if ((jQuery(dBP).css('display') != "none") && (jQuery(this).scrollTop() < 1))

		{

			jQuery(dBP).delay(0).fadeOut(192);

		}

	});


	jQuery('a[rel=top]').click(function () {

		scrollTo(document.body);

		return false;

	});


	jQuery('a[href^=#]').click(function (){

		var hsh = this.hash.replace('#', '');

		if (hsh && (el = document.getElementById(hsh)))

		{

			scrollTo(el);

			return false;

		}

		else

		{

			scrollTo(document.body);

			return false;

		}

	});

});


jQuery(window).load(function(){

	if (eS)

	{

		// Należy pwtórzyć tę część kodu, ponieważ czasem dzieją się cuda :D

		jQuery('html,body').delay(0).animate({

			scrollTop: 0

		}, 0);


		scrollTo(eS, 192);

	}

});

CSS

#skip_t {

margin: 0;

/*

dowolny CSS wg swojego widzi mi się ;P

*/

position: fixed;

right: 0.5em;

bottom: 0.5em;

}

Ehm, ja bym to zrobił tak:

$(document).ready(function(){

  $('.upButton').css('display','none');

  $(document).scroll(function(){

    $(document).scrollTop()>$(window).height()+100?$('.upButton').css('display','block'):$('.upButton').css('display','none');

  });

});

Gdzie class=“upButton” to jakiś link etc z kotwicą. A do tego jeszcze przed ostatnim }); dać:

$('.upButton').click(function{

  $('body').animate({scrollTop : 0},'slow');

});

I dzięki temu mamy kotwicę dla wyłączonego js’a, oraz animate dla włączonego. Kod jest krótszy niż połowa tego wyżej :stuck_out_tongue:

Oczywiście możesz też zamienić .css(‘display’,‘none’), oraz .css(‘display’,‘block’) odpowiednio na .hide(), oraz .show() Dzięki temu będziesz miał również animację pojawiającego się przycisku :slight_smile:

@drobok. Przedstawiłeś tylko mniejszą część całości. A gdzie click() po którym nastąpi przewinięcie strony na górę? A gdzie jest możliwość przewijania do dowolnego elementu strony? A czemu twój kod nie ma prawa działać poza pojawianiem się i znikaniem ‘.upButton’? Itp., itd. Jak się zastanowisz, to i kod Ci się rozrośnie :D. Oczywiście można jeszcze zminimalizować kod do niezbędnego minimum, np. zrezygnować z tworzenia poprzez jQuery “buttona” i zamieszczenie go bezpośrednio w HTML, ale kodu JS za wiele nie zmniejszysz :).

PS.

Przy stosowaniu animacji (hide, show itp.) musisz zastosować “zatrzask”, czyli sprawdzić jaki ‘display’ ma button, bo ci animacja zgłupieje. Raz Ci się button pojawi, raz nie. Sprawdź, a się przekonasz ;). Dlatego uważam, że mój kod ma wszystko co niezbędne. Można jedynie rozszerzyć możliwości o jakieś tam elementy :).

Jeśli dodasz wszystko przez js bez js funkcja nie ma prawa działać. Kod miał dotyczyć przewijania do góry, więc nie ma sensu dodawać dodatkowych funkcjonalności.

Całość powinna działać z kotwicą pokazaną przez poprzednika. Animate ma click (wiem z początku o nim zapomniałem, lecz później został dodany).

@ps, wiem, dlatego początkowo mamy zmianę display

Nie będzie działać :). Wiesz czemu? Temu, że na ‘body’ funkcja animate({scrollTop: 0}, …) nie zadziała we wszystkich przeglądarkach. Poprawnie jest:

$('html,body').animate({scrollTop : 0},'slow');

Poza tym co masz na myśli pisząc - “Całość powinna działać z kotwicą pokazaną przez poprzednika”? Niby jak ma działać jeśli Twój skrypt tego nie uwzględnia ;>? Nie kombinuj już :D. Nad swoim skryptem nie siedziałem 5 minut, jest ok :).