Jak dodać przycisk "wróć do góry strony"

Przycisk "W górę" można przypisać do tak zwanej grupy elementów bloga zwanej użytecznością. Są to elementy, które ułatwiają użytkownikom interakcję z treścią.

Przycisk W górę jest elementem HTML strony internetowej, który umożliwia szybkie przewinięcie do góry strony.

W tej sekcji przygotowałem dla ciebie kilka opcji naraz, którą z nich wybrać, zależy od ciebie.

Ustawianie przycisków z efektami uderzenia i spowolnienia

W panelu sterowania przejdź do sekcji Motyw - Edytuj kod HTML, naciśnij CTRL+F na klawiaturze i wpisz znacznik </head> w polu wyszukiwania, naciśnij Enter i dodaj następujący kod przed znacznikiem:

HTML<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"/>

Teraz znajdź tag ]]></b:skin> i dodaj po nim CSS:

CSS<style type='text/css'> 
#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:38px;height:38px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);box-sizing:initial;transition:all .3s ease-out; z-index:999999}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden;box-sizing:initial;}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}
</style>

Świetnie. Teraz musisz znaleźć znacznik </body> i ustawić jedną z opcji przed nim: 

Opcja płynnego przewijania:

JS
<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutQuint"})})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>

Opcja przewijania z odbiciem:

JS
<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutBounce"})})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>

Zapisz ustawienia i sprawdź wynik.

Ustawianie przycisków w górę i w dół

Równie interesującą opcją dwa w jednym jest dodanie dwóch przycisków, w górę i w dół. Znajdź znacznik ]]></b:skin> i dodaj po nim CSS:

CSS<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>

Teraz musisz znaleźć znacznik </body> i ustawić go przed nim:

HTML<ul id='scrollToTop'>
  <li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>
  <li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=0,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeIn(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},800),!1}})});
//]]>
</script>

Zapisz ustawienia i sprawdź, czy przyciski działają. 

 To już koniec naszej lekcji, więc prosimy o pozostawienie opinii i pytań w sekcji komentarzy.