Кнопка "Быстро вернуться наверх"

Оформление и расположение кнопки быстро вернуться наверх

by Andrey Dobrovoi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <header class="header">
    <div class="container">
      <h1 class="header__title">Просто Демо:</h1>
    </div>
  </header>
  <main>
    <div class="container">
      <section>
        <h2 style="text-align: center;">Кнопка "Быстро вернуться наверх" </h2>
        <h3>Начните прокручивать этот бредо-текст и вы увидите в правом нижнем углу няшную кнопку ;))</h3>
        <hr class="one">
        <p>Предполагалось, что большинство галактических источников радиоизлучения являются объектами входящими. Источниками радиоизлучения ожидает участь неотождествимости источников радиоизлучения. Распределенных по всему небу более многочисленная, состоит. Тогда гипотетические радиозвезды, существование которых опровергается. Создалось несколько странное обстоятельство гипотеза о тщетности попыток. Астрономы пришли к плоскости галактики и следовало ожидать, являются объектами, входящими. Вторая же пылевая межзвездная среда прозрачна, радиоизлучение доходит беспрепятственно большинство.</p>
        <p>Невелика, все действующие точечные радиоисточники слились бы при достаточной. Выше, динамическими соображениями никакой связи. Будет все-таки слишком слабым, останется неуловимым объектами, входящими в первые годы. Слабые галактики и других характеристик. Полосы и была выдвинута гипотеза. Часть ярких галактик являлась источником радиоизлучения, не обнаруживают галактической концентрации этих источников. Многочисленная, состоит из методы определения их расстояний. Оптических объектов очень много и следовало ожидать, являются очень близкие звезды.</p>
        <p>Близости радиозвезд было отдано много усилий тех объектов были. Том, что они расположены на отождествление лишь слабые галактики. Экватора и других характеристик без признаков концентраций к плоскости галактики и оптически. Проявляли себя в этой полосе показывает сильную. Будет все-таки слишком слабым останется. Яркие...

CSS

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,cyrillic);
*, ::after, ::before {
    box-sizing: border-box;
}
html, body {
  height: 100%;
  margin:0;
  padding:0;
}
body{
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  background: -webkit-linear-gradient(90deg, #abbaab 10%, #ffffff 90%);
  /* Chrome 10+, Saf5.1+ */
  background: -moz-linear-gradient(90deg, #abbaab 10%, #ffffff 90%);
  /* FF3.6+ */
  background: -ms-linear-gradient(90deg, #abbaab 10%, #ffffff 90%);
  /* IE10 */
  background: -o-linear-gradient(90deg, #abbaab 10%, #ffffff 90%);
  /* Opera 11.10+ */
  background: linear-gradient(90deg, #abbaab 10%, #ffffff 90%);
  /* W3C */
}
.header {
    padding: 24px 0;
    text-align: center;
}
.header__title {
    margin: 0;
    text-align: center;
}
.container {
    width: 100%;
    max-width: 960px;
    padding: 0 20px;
    margin: 0 auto;
}
main {
    margin-bottom: 45px;
    padding:0;
}

h1, h2, h3 {
    color:#191919;
    font-weight: 300;
    line-height: 1.3;
}  
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
    text-align: center;
}
h2, h3 {
  margin-bottom: 22px;
}
hr.one {
    height: 1px;
    border: 0;
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));
    background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));
    background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));
    background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));
    margin: 22px auto;
}
a {
    color: #006b05;
    text-decoration: none;
}

.fa-heart{
  color:red;
}
/* Кнопка вернуться наверх */

 .scrollTop {
     display: none;
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     -ms-border-radius: 100%;
     border-radius: 100%;
     position: fixed;
   ...

JavaScript

jQuery(document).ready(function($){
	var
	speed = 500,
	$scrollTop = $('<a href="#" title="Быстро вернуться наверх" class="scrollTop"><i class="fa fa-angle-double-up"></i></a>').appendTo('body');        

	$scrollTop.click(function(e){
		e.preventDefault();

		$( 'html:not(:animated),body:not(:animated)' ).animate({ scrollTop: 0}, speed );
	});

	//появление
	function show_scrollTop(){
		( $(window).scrollTop() > 300 ) ? $scrollTop.fadeIn(600) : $scrollTop.fadeOut(600);
	}
	$(window).scroll( function(){ show_scrollTop(); } );
	show_scrollTop();

});