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)
