commit 80a05222aabb80aa9e2e3759b16cba3d24ba37d7 Author: AnthonyAxenov Date: Sat Sep 24 23:43:59 2016 +0800 INITIAL COMMIT diff --git a/upbtn.css b/upbtn.css new file mode 100644 index 0000000..157966d --- /dev/null +++ b/upbtn.css @@ -0,0 +1,79 @@ +/* КНОПКА изначально невидимая */ +div.upbtn { + display: none; + position: fixed; + cursor: pointer; + background: none; + text-align: center; + transition: all 0.2s linear; +} +@media screen and (max-width: 750px) { + div.upbtn { + /*left: 30px; */ /* кнопка слева внизу */ + right: 30px; /* кнопка справа внизу */ + bottom: 30px; + width: 60px; + height: 60px; + } +} +@media screen and (min-width: 751px) { + div.upbtn { + left: 0px; + bottom: 0px; + width: 100px; + height: 100%; + } +} +/* КНОПКА видимая */ +div.upbtn.norm { + display: block; + background-color: #DDD; + transition: all 0.2s linear; +} +@media screen and (max-width: 750px) { + div.upbtn.norm { + opacity: 1; + border-radius: 30px; /* в два раза меньше стороны */ + /* Material-кнопка для мобилки */ + box-shadow: #0a0a0a 0px 2px 12px -2px; + background-color: #2196F3; + } +} +@media screen and (min-width: 751px) { + div.upbtn.norm { + opacity: 0.2; + } + div.upbtn.norm:hover { + opacity: 0.5; + } +} +/* СТРЕЛКА */ +div.upbtn div.upbtnarr { + width: 40px; + height: 40px; + display: block; + transition: all 0.2s linear; + transform: rotate(0deg); + background-size: cover; + background-repeat: no-repeat; + background-image: url(upbtn.png); +} +@media screen and (max-width: 750px) { + div.upbtn div.upbtnarr { + width: 40px; + height: 40px; + margin: 10px auto; + } +} +@media screen and (min-width: 751px) { + div.upbtn div.upbtnarr { + width: 40px; + height: 40px; + margin: 20px auto; + } +} +/* СТРЕЛКА перевёрнутая */ +div.upbtn div.upbtnarr.down { + /*transition: all 0.2s linear;*/ + transform: rotate(180deg); +} \ No newline at end of file diff --git a/upbtn.js b/upbtn.js new file mode 100644 index 0000000..a7274c7 --- /dev/null +++ b/upbtn.js @@ -0,0 +1,30 @@ +$(document).ready(function() { + $('body').append('
'); + var lastpos = 0; + if ($(window).scrollTop() > 100) { + $('#upbtn').addClass('norm'); + } + $(window).scroll(function() { + if ($(window).scrollTop() > 0) { + $("#upbtnarr").removeClass('down'); + if ($(window).scrollTop() > 100) { + $('#upbtn').addClass('norm'); + } else { + if (lastpos == 0) { + $("#upbtn").removeClass('norm'); + } + } + } else if ($(window).scrollTop() < 100 && lastpos >= 100 && !$('#upbtnarr').hasClass('down')) { + $("#upbtnarr").addClass('down'); + } + }); + $("#upbtn").click(function() { + if ($(window).scrollTop() > 5) { + lastpos = $(window).scrollTop(); + $('body,html').animate({'scrollTop': 0}, 300); + } else { + $('body,html').animate({'scrollTop': lastpos}, 300); + } + }); +}); + diff --git a/upbtn.png b/upbtn.png new file mode 100644 index 0000000..53aadcf Binary files /dev/null and b/upbtn.png differ