[jQuery] nowoczesny przycisk “przewiń do góry”

Podziel się:   Facebook   Google+   Twitter   GG   E-mail  

Szybki tutorial JavaScript używający jQuery do wyświetlenia przycisku “skocz na górę strony”.

Opis:
– przeźroczysta ikonka ze strzałką pojawia się po przewinięciu strony o zadaną wysokość (np. 200px) i znika po powrocie na samą górę,
– po najechaniu myszką ikonka staje się bardziej widoczna (mniej przeźroczysta)
– po kliknięciu w ikonkę uruchamia się płynne przejście użytkownika na samą górę strony

Przykład:
– na tym blogu (przewiń strone trochę niżej aby zobaczyć)

Gotowiec:
– wtyczka wordpress:  https://webowiec.net/blog/wordpress-go-top-of-the-page-skocz-na-gore-strony/

1. Pobierz ikonkę:

(kliknij prawym przyciskiem myszy i wybierz “zapisz element docelowy jako”) 

2. Dodaj kod HTML do swojego nagłówka strony (lub sam kod CSS umieść w pliku ze stylem strony):

<style type=”text/css”>
#scroolTOP { display: none;position: fixed; z-index:99999; right: 20px; bottom: 20px;border:0px; }
.gototop_icon_i { width:45px;height:45px; }
</style>

3. Dodaj jQuery do swojej strony/bloga :

można to zrobić na dwa sposoby:
– pobrać skrypt bezpośrednio ze strony: http://code.jquery.com/jquery-1.10.2.min.js i umieścić w kodzie strony

LUB

– dodać kod do nagłówka strony (sekcja HEAD):

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

4. Dodaj skrypt JavaScript:

Podobnie jak CSS, możesz wstawić fragment skryptu bezpośrednio do nagłówka strony, lub skopiować go do pliku ze skryptami js strony:

<script type="text/javascript">
var gototop_icon = "https://webowiec.net/blog/wp-content/uploads/2013/08/1376566775_upload21.png";
var gototop_run = false;
jQuery(window).scroll(function(){ //scrool
        
	var scrollTop = jQuery(window).scrollTop();

	if ( scrollTop>200 ) { // pokaz
		if ( ! gototop_run ) {
		gototop_run = true;
		jQuery('body').append('<a id="scroolTOP" href="#"><img src="'+gototop_icon+'" class="gototop_icon_i" alt="TOP"></a>');
		jQuery('#scroolTOP').fadeTo('quick', 0.2);
		jQuery('#scroolTOP').mouseover(function(){  jQuery(this).fadeTo(100, 0.6);  })
			.mouseout(function(){  jQuery(this).fadeTo(100, 0.2);  });
		jQuery('#scroolTOP').click(function(){
			jQuery("html, body").animate({ 'scrollTop': 0 }, 500);
			return false;
		});
		}
	} else { // ukryj 
		if ( jQuery('#scroolTOP').length>0 ) jQuery('#scroolTOP').fadeOut('quick').remove();
		gototop_run = false;
	}
}); //scrool
</script>

UWAGA! Pamiętaj aby edytować zmienną “gototop_icon” (pierwsza linia skryptu) i wkleić tam ścieżę do pobranej wcześniej ikonki (punkt 1)

Powiązane artykuły

Featuring Top 20/25 of Porady dla webmasterów

Kurs css

  • Kurs CSS dla niecierpliwych [cz 1/2]

    Co to jest CSS, po co go używać, jak go używać.. CSS - stylizowanie różnych elementów HTML, inaczej mówiąc: wizualizowanie/nadawanie odpowiedniego wyglądu strony www. Zaczynając kurs…

  • Kurs CSS dla niecierpliwych [cz 2/2]

    Kontynuacja przyspieszonego kursu dla niecierpliwych. Część 1/2 - Kurs CSS dla niecierpliwych 1/2 Zakładam, że znasz lub zapoznałeś/aś się już wstępnie z podstawami HTML, wiesz do czego…