southklad 31 мар 2021, 21:10

Кнопка вверх

Приветствую, а как сделать кнопку вверх как тут или ВК, но лучше как тут, только чтобы она появлялась уже при перемещении курсора влево за область

Изображение

А так же чтобы она в моб. версии тоже как то была, может внизу на ширину экрана с подсветкой?
Комментарии: 4

CabinetAdmin 02 апр 2021, 09:52 Сообщение

Если прямо как здесь, то в футере перед:

Код: Выделить всё

<div>
	<a id="bottom" class="anchor" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>
добавить:

Код: Выделить всё

<div class="go_up"><svg viewBox="0 0 9 7" width="14" height="14"><path d="M1 6l3.5-4L8 6" fill="none"></path></svg></div>
Плюс стили:

Код: Выделить всё

.go_up {
	-webkit-transition: background-color 200ms ease-out,opacity 200ms ease-out;
	-moz-transition: background-color 200ms ease-out,opacity 200ms ease-out;
	transition: background-color 200ms ease-out,opacity 200ms ease-out;
	opacity: 0;
	width: 60px;
	background-color: transparent;
	cursor: pointer;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 5000;
	text-align: center;
	padding-top: 10px;
	visibility: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.go_up.fixed {
	opacity: 1;
	visibility: visible;
}

.go_up.fixed svg {
	-webkit-transition: stroke 2000ms;
	-moz-transition: stroke 2000ms;
	transition: stroke 2000ms;
	stroke: #979797;
	stroke-width: 2px;
}

.go_up.fixed:hover {
	background-color: rgba(191,191,193,.2);
}

@media (max-width: 1024px) {
	.go_up.fixed {
		background-color: rgba(191,191,193,.3);
		width: 40px;
		height: 30px;
		top: auto;
	}
}
тут @media (max-width: 1024px) минимальная ширина вертикальной кнопки, после она уже выводится в виде кнопки снизу.

Скрипт:

Код: Выделить всё

<script>
jQuery(function($) {
	/* Go Up */
	var panel = ($(window).scrollTop()>400)?$('.go_up').addClass('fixed'):$('.go_up');
	$(window).scroll(function(){
		if( $(this).scrollTop() > 400 && !panel.hasClass('fixed')){
			panel.addClass('fixed');
		} else if($(this).scrollTop() < 400 && panel.hasClass('fixed')){
			panel.removeClass('fixed');
		}
	});
	$(".go_up").click(function(event){
		$('html, body').animate({scrollTop:0}, 500);
	});
});
</script>

Вот чтобы как в вк, т.е. поле со стрелкой во всю пустоту слева, то стили будут такие:

Код: Выделить всё

.go_up {
	-webkit-transition: background-color 200ms ease-out,opacity 200ms ease-out;
	-moz-transition: background-color 200ms ease-out,opacity 200ms ease-out;
	transition: background-color 200ms ease-out,opacity 200ms ease-out;
	opacity: 0;
	width: 50%;
	background-color: transparent;
	cursor: pointer;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 1;
	text-align: left;
	padding-top: 15px;
	visibility: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.go_up.fixed {
	opacity: 1;
	visibility: visible;
}

.go_up.fixed svg {
	-webkit-transition: stroke 2000ms;
	-moz-transition: stroke 2000ms;
	transition: stroke 2000ms;
	stroke: #979797;
	stroke-width: 2px;
	padding: 2px 23px;
}

.go_up.fixed:hover {
	background-color: rgba(191,191,193,.2);
}

@media (max-width: 1300px) {
	.go_up.fixed {
		background-color: rgba(191,191,193,.3);
		width: 40px;
		height: 25px;
		top: auto;
		text-align: center;
		z-index: 9;
	}

	.go_up.fixed svg {
		padding: 0;
	}
}
Опять же @media (max-width: 1300px) нужно подгонять по месту, это значение для стандартного просильвера.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 03 апр 2021, 08:03 Сообщение

Спасибо
  • 0
Изображение

southklad 05 апр 2021, 19:01 Сообщение

Только увидел, что в темах норм кнопка, а вот если опустится в подвал, появляется

Изображение

затемнение при наведении
  • 0
Изображение

CabinetAdmin 06 апр 2021, 15:54 Сообщение

Да, есть такой минус, поэтому всегда использую тонкую полоску.

Можно конечно сделать всё культурно, без таких косяков, но тогда надо расширение писать, нужно дополнять структуру не в одном месте, как здесь. Но довольно сложно сделать такую вещь универсальной, стили ведь все разные, структуры тоже могут быть разные...
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!