Przycisk „przewiń do góry”

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ń stronę trochę niżej aby zobaczyć)

1. Pobierz ikonkę:

(kliknij prawym przyciskiem myszy i wybierz „zapisz element docelowy / grafikę 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 = "#Twój URL obrazka";
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żkę do pobranej wcześniej ikonki oczywiście, możesz wstawić dowolną ikonę.

TO TYLE !