BackToTop – živá ukázka

Výsledek

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BackToTop</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>

<body>

<div id="section1" class="container-fluid">
  <h1>Section 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis justo. Nam vel luctus arcu, id porttitor eros. Sed enim nibh, tempor eu sagittis ut, viverra vel odio. Ut id ipsum nec arcu ornare vestibulum a imperdiet mauris. Quisque facilisis lectus a eros sodales, quis aliquam diam tincidunt.</p>
</div>
<div id="section2" class="container-fluid">
  <h1>Section 2</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis justo. Nam vel luctus arcu, id porttitor eros. Sed enim nibh, tempor eu sagittis ut, viverra vel odio. Ut id ipsum nec arcu ornare vestibulum a imperdiet mauris. Quisque facilisis lectus a eros sodales, quis aliquam diam tincidunt.</p>
</div>
<div id="section3" class="container-fluid">
  <h1>Section 3</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis justo. Nam vel luctus arcu, id porttitor eros. Sed enim nibh, tempor eu sagittis ut, viverra vel odio. Ut id ipsum nec arcu ornare vestibulum a imperdiet mauris. Quisque facilisis lectus a eros sodales, quis aliquam diam tincidunt.</p>
</div>
<div id="section4" class="container-fluid">
  <h1>Section 4</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis justo. Nam vel luctus arcu, id porttitor eros. Sed enim nibh, tempor eu sagittis ut, viverra vel odio. Ut id ipsum nec arcu ornare vestibulum a imperdiet mauris. Quisque facilisis lectus a eros sodales, quis aliquam diam tincidunt.</p>
</div>
<div id="section5" class="container-fluid">
  <h1>Section 5</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis justo. Nam vel luctus arcu, id porttitor eros. Sed enim nibh, tempor eu sagittis ut, viverra vel odio. Ut id ipsum nec arcu ornare vestibulum a imperdiet mauris. Quisque facilisis lectus a eros sodales, quis aliquam diam tincidunt.</p>
</div>

<a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Top<span></span></a>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}
#section1 {
  height: 200px;
  background-color: gray;
}
#section2 {
  height: 500px;
  background-color: yellow;
}
#section3 {
  height: 800px;         
  background-color: blue;  
}
#section4 {
  height: 1200px;        
  background-color: red;  
}
#section5 {
  height: 2000px;        
  background-color: green;  
}
.modra {
     background-color: blue;
} 
.cervena {
     background-color: red;
} 
.zelena {
     background-color: green;
} 
.seda {
     background-color: gray;
} 
.zluta {
     background-color: yellow;
}

CSS

Autoformát
CSS reset
Až na konci

$(document).ready(function(){ 
    var pozice1 = $('#section1').offset();
    var vyska1 = pozice1.top + $("#section1").height();
    var pozice2 = $('#section2').offset();
    var vyska2 = pozice2.top + $("#section2").height();
    var pozice3 = $('#section3').offset();
    var vyska3 = pozice3.top + $("#section3").height();
    var pozice4 = $('#section4').offset();
    var vyska4 = pozice4.top + $("#section4").height();
    var pozice5 = $('#section5').offset();
    var vyska5 = pozice5.top + $("#section5").height(); 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > pozice1.top && $(this).scrollTop() <= vyska1) { 
            $('#scroll').fadeIn();
            $('#scroll').addClass('modra'); 
        } else if ($(this).scrollTop() > pozice2.top && $(this).scrollTop() <= vyska2) {            
            $('#scroll').addClass('cervena'); 
        } else if ($(this).scrollTop() > pozice3.top && $(this).scrollTop() <= vyska3) {             
            $('#scroll').addClass('zelena');
        } else if ($(this).scrollTop() > pozice4.top && $(this).scrollTop() <= vyska4) {             
            $('#scroll').addClass('seda');
        } else if ($(this).scrollTop() > pozice5.top && $(this).scrollTop() <= vyska5) {             
            $('#scroll').addClass('zluta');
        }  
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});

JS

Autoformát
jQuery
Umístění JS