Przycisk przewijania do początku strony

Kody można umieszczać automatycznie w gadżecie. Post jest z prezentacją, więc jak przewiniesz, po lewej pokaże się efekt drugiego kodu, a po prawej pierwszego kodu, można porównać działanie.

kod pierwszy:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <style> .to-top{ text-align:center; } #scroll-to-top{ display:none; position:fixed; bottom:15px; right:20px; opacity:0.8; z-index: 1000; } #scroll-to-top:hover{ opacity:1; } #scroll-to-top img{ padding: 3px; border-radius: 100px; } #scroll-to-top img { background: #26456e; border: 1px solid #37577f; } </style> <a href="#" id="scroll-to-top" title="Do góry!"><img alt="strzałka do góry" src="https://i.imgur.com/VgN6z6n.png" /></a> <script> $(function(){ var stt_is_shown = false; $(window).scroll(function(){ var win_height = 300; var scroll_top = $(document).scrollTop(); if (scroll_top > win_height && !stt_is_shown) { stt_is_shown = true; $("#scroll-to-top").fadeIn(); } else if (scroll_top < win_height && stt_is_shown) { stt_is_shown = false; $("#scroll-to-top").fadeOut(); } }); $("#scroll-to-top").click(function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, 1500); }); }); </script>

kod drugi:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script> <style> #back-top { position: fixed; bottom: 0px; right: 20px; z-index: 1000; } #back-top a { width: 40px; display: block; color: #bbb; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover { color: #000; } /* arrow icon */ #back-top span { width: 40px; height: 40px; display: block; margin-bottom: 7px; background: #26456e url('https://stanhub.com/tutorials/scroll-to-top/scroll-to-top-demo/up-arrow.png') no-repeat center center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover span { background-color: #00bfab; } </style> <p id="back-top"> <a href="#top"><span></span></a> </p>