Также во всех вариантах используется белая стрелка вверх на CSS (base64) и не используется HTML (он добавлен в JS)
JS добавляем в подвал страницы.
Вариант 1:
Обычная квадратная кнопка, которая появляется в правом нижнем углу страницы после начала прокрутки вниз
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.upbtn { opacity: 0.8; z-index: 9999; width: 60px; height: 60px; position: fixed; bottom: -80px; right: 20px; cursor: pointer; border:3px solid #BFE2FF; transition: all .7s ease-in-out; background-position: center center; background-repeat: no-repeat; background-color: #337AB7; background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ0NC44MTkgNDQ0LjgxOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgxOSA0NDQuODE5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTQzMy45NjgsMjc4LjY1N0wyNDguMzg3LDkyLjc5Yy03LjQxOS03LjA0NC0xNi4wOC0xMC41NjYtMjUuOTc3LTEwLjU2NmMtMTAuMDg4LDAtMTguNjUyLDMuNTIxLTI1LjY5NywxMC41NjYgICBMMTAuODQ4LDI3OC42NTdDMy42MTUsMjg1Ljg4NywwLDI5NC41NDksMCwzMDQuNjM3YzAsMTAuMjgsMy42MTksMTguODQzLDEwLjg0OCwyNS42OTNsMjEuNDExLDIxLjQxMyAgIGM2Ljg1NCw3LjIzLDE1LjQyLDEwLjg1MiwyNS42OTcsMTAuODUyYzEwLjI3OCwwLDE4Ljg0Mi0zLjYyMSwyNS42OTctMTAuODUyTDIyMi40MSwyMTMuMjcxTDM2MS4xNjgsMzUxLjc0ICAgYzYuODQ4LDcuMjI4LDE1LjQxMywxMC44NTIsMjUuNywxMC44NTJjMTAuMDgyLDAsMTguNzQ3LTMuNjI0LDI1Ljk3NS0xMC44NTJsMjEuNDA5LTIxLjQxMiAgIGM3LjA0My03LjA0MywxMC41NjctMTUuNjA4LDEwLjU2Ny0yNS42OTNDNDQ0LjgxOSwyOTQuNTQ1LDQ0MS4yMDUsMjg1Ljg4NCw0MzMuOTY4LDI3OC42NTd6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==) } .upbtn:hover { opacity: 1; background-color: #337AB7; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('body').append('<div class="upbtn"></div>'); $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.upbtn').css({ bottom: '15px' }); } else { $('.upbtn').css({ bottom: '-80px' }); } }); $('.upbtn').on('click',function() { $('html, body').animate({ scrollTop: 0 }, 500); return false; }); |
Вариант 2:
Вариант такой же как и первый, только с другой стрелкой и другим появлением.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.upbtn { z-index: 9999; width: 70px; height: 70px; color: #FFF; position: fixed; bottom: 20px; right: 20px; cursor: pointer; border:3px solid #BFE2FF; border-radius:50%; transform: scale(0); transition: all .7s ease-in-out; background-position: center center; background-repeat: no-repeat; background-color: #337AB7; background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5MS44NTggNDkxLjg1OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDkxLjg1OCA0OTEuODU4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQ5MS44NTgsNDQyLjQ2MWMwLDEzLjkzMS0xMS4yOTMsMjUuMjI0LTI1LjIyNCwyNS4yMjRMMjQ1LjkzLDM3My4wOTdMMjUuMjI0LDQ2Ny42ODYgICAgQzExLjI5Miw0NjcuNjg2LDAsNDU2LjM5MiwwLDQ0Mi40NjFMMjI3LjAxMSwzMi41OGMwLDAsMTguOTE4LTE4LjkxOCwzNy44MzQsMEMyODMuNzY0LDUxLjQ5OSw0OTEuODU4LDQ0Mi40NjEsNDkxLjg1OCw0NDIuNDYxeiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) } .upbtn:hover { transform: scale(1.2)!important; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('body').append('<div class="upbtn"></div>'); $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.upbtn').css({ transform: 'scale(1)' }); } else { $('.upbtn').css({ transform: 'scale(0)' }); } }); $('.upbtn').on('click',function() { $('html, body').animate({ scrollTop: 0 }, 500); return false; }); |
Вариант 3:
Еще один вариант с появлением стрелки в правом нижнем углу
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.upbtn { z-index: 9999; width: 220px; height: 220px; color: #FFF; position: fixed; bottom: -220px; right: -220px; cursor: pointer; transform: rotate(-45deg); border:3px solid #BFE2FF; transition: all .7s ease-in-out; background-color: #337AB7; } .upbtn:before { content: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDI4NC45MjkgMjg0LjkyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjg0LjkyOSAyODQuOTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTE3LjEyOCwxNjcuODcyYzEuOTAzLDEuOTAyLDQuMDkzLDIuODU0LDYuNTY3LDIuODU0YzIuNDc0LDAsNC42NjQtMC45NTIsNi41NjctMi44NTRMMTQyLjQ2Niw1NS42NjZsMTEyLjIwOCwxMTIuMjA2ICAgIGMxLjkwMiwxLjkwMiw0LjA5MywyLjg1NCw2LjU2MywyLjg1NGMyLjQ3OCwwLDQuNjY4LTAuOTUyLDYuNTctMi44NTRsMTQuMjc0LTE0LjI3N2MxLjkwMi0xLjkwMiwyLjg0Ny00LjA5MywyLjg0Ny02LjU2MyAgICBjMC0yLjQ3NS0wLjk1MS00LjY2NS0yLjg0Ny02LjU2N0wxNDkuMDI4LDcuNDE5Yy0xLjkwMS0xLjkwNi00LjA4OC0yLjg1My02LjU2Mi0yLjg1M3MtNC42NjUsMC45NS02LjU2NywyLjg1M0wyLjg1NiwxNDAuNDY0ICAgIEMwLjk1LDE0Mi4zNjcsMCwxNDQuNTU0LDAsMTQ3LjAzNGMwLDIuNDY4LDAuOTUzLDQuNjU4LDIuODU2LDYuNTYxTDE3LjEyOCwxNjcuODcyeiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik0xNDkuMDI4LDExNy4wNTVjLTEuOTAxLTEuOTA2LTQuMDg4LTIuODU2LTYuNTYyLTIuODU2cy00LjY2NSwwLjk1My02LjU2NywyLjg1NkwyLjg1NiwyNTAuMSAgICBDMC45NSwyNTIuMDAzLDAsMjU0LjE5MiwwLDI1Ni42N2MwLDIuNDcyLDAuOTUzLDQuNjYxLDIuODU2LDYuNTY0bDE0LjI3MiwxNC4yNzZjMS45MDMsMS45MDMsNC4wOTMsMi44NDgsNi41NjcsMi44NDggICAgYzIuNDc0LDAsNC42NjQtMC45NTEsNi41NjctMi44NDhsMTEyLjIwNC0xMTIuMjA5bDExMi4yMDgsMTEyLjIwOWMxLjkwMiwxLjkwMyw0LjA5MywyLjg1Miw2LjU2MywyLjg1MiAgICBjMi40NzgsMCw0LjY2OC0wLjk0OCw2LjU3LTIuODUybDE0LjI3NC0xNC4yNzZjMS45MDItMS45MDMsMi44NDctNC4wOTMsMi44NDctNi41NjRjMC0yLjQ3OC0wLjk1MS00LjY2Ny0yLjg0Ny02LjU3ICAgIEwxNDkuMDI4LDExNy4wNTV6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); transform: rotate(45deg); position:relative; display:block; left:60px; top:88px; } .upbtn:after { content: "ВВЕРХ"; transform: rotate(-45deg); position:relative; display:block; font-weight:bold; font-size:13px; left:-12px; top:14px; } .upbtn:hover { transform: rotate(45deg); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('body').append('<div class="upbtn"></div>'); $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.upbtn').css({ bottom: '15px' }); } else { $('.upbtn').css({ bottom: '-80px' }); } }); $('.upbtn').on('click',function() { $('html, body').animate({ scrollTop: 0 }, 500); return false; }); |
Вариант 4:
Вариант похожий на кнопку вверх в ВК.
Очень хороший и удобный вариант, если поле для кнопки не будет мешать вашему контенту (на примере он мешает).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.upbtn { z-index: 9999; width: 100px; height: 100%; color: #FFF; position: fixed; top:0; left:-100px; cursor: pointer; transition: all .7s ease-in-out; background-color: rgb(51, 122, 183, 0.5); } .upbtn:before { content: "ВВЕРХ"; display:block; position:absolute; text-align:center; color: #FFF; font-size:36px; line-height:100px; font-weight:bold; height:100%; vertical-align:center; writing-mode:tb-rl; transform: rotate(180deg); } .upbtn:after { content: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjMycHgiIHZpZXdCb3g9Ii0zOSAwIDM3NCAzNzQuMDAwNTkiIHdpZHRoPSIzMnB4Ij48cGF0aCBkPSJtMTI3IDI2OWg0MmM0LjQxNzk2OSAwIDgtMy41ODIwMzEgOC04di0xNTYuNjMyODEybDMyLjc0MjE4OCAzMC4zMzk4NDNjMy4yMzA0NjggMi45OTYwOTQgOC4yODEyNSAyLjgxMjUgMTEuMjg1MTU2LS40MTQwNjJsMjkuMTE3MTg3LTMxLjIyMjY1N2MxLjQ0OTIxOS0xLjU1NDY4NyAyLjIxODc1LTMuNjIxMDkzIDIuMTQ0NTMxLTUuNzQyMTg3LS4wNzQyMTgtMi4xMjEwOTQtLjk5MjE4Ny00LjEyNS0yLjU0Mjk2OC01LjU3NDIxOWwtOTYuMzM1OTM4LTg5LjYwOTM3NWMtMy4wNzAzMTItMi44NTkzNzUtNy44MjgxMjUtMi44NTkzNzUtMTAuOTAyMzQ0IDBsLTk2LjM1MTU2MiA4OS42MTMyODFjLTEuNTU4NTk0IDEuNDQ1MzEzLTIuNDcyNjU2IDMuNDUzMTI2LTIuNTQ2ODc1IDUuNTc4MTI2cy42OTkyMTkgNC4xOTE0MDYgMi4xNTIzNDQgNS43NDIxODdsMjkuMTk5MjE5IDMxLjIyNjU2M2MzLjAwNzgxMiAzLjIxNDg0MyA4LjA1MDc4MSAzLjM5NDUzMSAxMS4yODEyNS4zOTg0MzdsMzIuNzU3ODEyLTMwLjMzNTkzN3YxNTYuNjMyODEyYzAgNC40MTc5NjkgMy41ODIwMzEgOCA4IDh6bTAgMCIgZmlsbD0iI0ZGRkZGRiIvPjxwYXRoIGQ9Im04IDMxNmgyODBjNC40MTc5NjkgMCA4IDMuNTgyMDMxIDggOHY0MmMwIDQuNDE3OTY5LTMuNTgyMDMxIDgtOCA4aC0yODBjLTQuNDE3OTY5IDAtOC0zLjU4MjAzMS04LTh2LTQyYzAtNC40MTc5NjkgMy41ODIwMzEtOCA4LTh6bTAgMCIgZmlsbD0iI0ZGRkZGRiIvPjwvc3ZnPgo=); display:block; position:absolute; top:calc(50% - 120px); width:100px; text-align:center; } .upbtn:hover { background-color: rgb(51, 122, 183, 0.8); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('body').append('<div class="upbtn"></div>'); $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.upbtn').css({ left: '0' }); } else { $('.upbtn').css({ left: '-100px' }); } }); $('.upbtn').on('click',function() { $('html, body').animate({ scrollTop: 0 }, 500); return false; }); |
Вариант 5:
Вариант аналогичен с четвертым, только кнопка выезжает снизу, не перекрывая тем самым контент
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.upbtn { z-index: 9999; width: 100%; height: 16px; color: #FFF; position: fixed; bottom: -80px; cursor: pointer; background: #337AB7; transition: all .3s ease-in-out; } .upbtn:before { content: ""; transition: all .3s ease-in-out; z-index: 9999; width: 100px; height: 100px; border: 16px solid #337AB7; position:relative; bottom:10px; left: 50%; margin-left: -50px; cursor: pointer; display:block; transform: rotate(45deg); background: #FFF; } .upbtn:hover { height: 20px; } .upbtn:hover:before { bottom:14px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('body').append('<div class="upbtn"></div>'); $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.upbtn').css({ bottom: 0 }); } else { $('.upbtn').css({ bottom: '-80px' }); } }); $('.upbtn').on('click',function() { $('html, body').animate({ scrollTop: 0 }, 500); return false; }); |
СУПЕР — https://www.edelman.blog/2018/11/My-Philosophy.html