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)
The post [jQuery] nowoczesny przycisk “przewiń do góry” first appeared on Webmaster Blog.