Кнопка "вверх" и варианты ее оформления

Также во всех вариантах используется белая стрелка вверх на CSS (base64) и не используется HTML (он добавлен в JS)

JS добавляем в подвал страницы.

Вариант 1:

Обычная квадратная кнопка, которая появляется в правом нижнем углу страницы после начала прокрутки вниз

.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;
}

.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;

}

$('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;
});

$('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:

Вариант такой же как и первый, только с другой стрелкой и другим появлением.

Открыть в новом окне

.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;
}

.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;

}

$('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;
});

$('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:

Еще один вариант с появлением стрелки в правом нижнем углу

Открыть в новом окне

.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);
}

.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);

}

$('body').append('<div class="upbtn"></div>');			
$(window).scroll(function() {
	if ($(this).scrollTop() > 100) {
		$('.upbtn').css({
			right: '-120px',
			bottom: '-120px'
		});
		} else {
		$('.upbtn').css({
			right: '-220px',
			bottom: '-220px'
		});
	}
});
$('.upbtn').on('click',function() {
	$('html, body').animate({
		scrollTop: 0
	}, 500);
	return false;
});

$('body').append('<div class="upbtn"></div>');

$(window).scroll(function() {

if ($(this).scrollTop() > 100) {

$('.upbtn').css({

right: '-120px',

bottom: '-120px'

});

} else {

$('.upbtn').css({

right: '-220px',

bottom: '-220px'

});

}

});

$('.upbtn').on('click',function() {

$('html, body').animate({

scrollTop: 0

}, 500);

return false;

});

Вариант 4:

Вариант похожий на кнопку вверх в ВК.

Очень хороший и удобный вариант, если поле для кнопки не будет мешать вашему контенту (на примере он мешает).

Открыть в новом окне

.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);
}

.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);

}

$('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;
});

$('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:

Вариант аналогичен с четвертым, только кнопка выезжает снизу, не перекрывая тем самым контент

Открыть в новом окне

.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;
}

.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;

}

$('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;
});

$('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;

});

Андрей: 12.02.2025 в 05:35

открыл в новом окне с работающей кнопкой, скопировал от туда прямо код через Ctrl+U
в CSS строчки со стилем еще добавились
в JS этот скрипт (аякс и все такое), поместил его в подвал страницы перед </body></html> и все заработало
может не совсем правильно сделал но теперь работает
так что отбой, спасибо за кнопку

Ответить
Андрей: 12.02.2025 в 05:17

Здравствуйте, не получается поставить, вернее не хочет работать кнопка появляется с ошибкой

то что CSS это понятно в CSS файл

а вот JS в самом низу страницы но перед </body></html> окрашивается в белый цвет ошибки, можете уточнить где пределы подвала

я на мобильную версию бургер меню ваше ставил там еще были эти строчки раньше
<скрипт src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></скрипт >
<скрипт >(function($){
ТУТ КОД
}
})(jQuery);
</скрипт >

а теперь их нет, короче не работает, помогите советом

Ответить
Константин: 08.06.2024 в 19:36

https://vsc-vrn.ru/ - получилось хорошо

Ответить
who?: 07.02.2024 в 00:59

https://vibor-zaimov.ru - огонь, спасибо

Ответить
Зинаида: 19.12.2023 в 11:56

Спасибо! Просто. Понятно. Работает.

Ответить
Алексей: 14.02.2022 в 02:15

А как сделать чтоб кнопка работала на всех страницах сайта? На главной работает, на всех других нет.

Ответить
Дмитрий: 15.10.2021 в 08:36

Спасибо все прекрасно работает!!!

Ответить
Дмитрий: 15.10.2021 в 07:43

А какой код в html добавить?

Ответить
- Alexander: 15.10.2021 в 08:27
  
  Никакого
  
  Ответить
Doston: 25.03.2020 в 16:48

а как теперь установит?

Ответить
- Doston: 25.03.2020 в 16:54
  
  Всё сработал спасибо огромное
  
  Ответить
maximilian: 01.07.2019 в 15:36

СУПЕР - https://www.edelman.blog/2018/11/My-Philosophy.html

Ответить

Вариант 1:

Вариант 2:

Вариант 3:

Вариант 4:

Вариант 5:

Смотрите также:

Добавить комментарий:

Комментарии: