Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.09.2019, 02:13
Аспирант
Отправить личное сообщение для misha.korolcov Посмотреть профиль Найти все сообщения от misha.korolcov
 
Регистрация: 05.09.2019
Сообщений: 84

скрол якорь вниз
++

Последний раз редактировалось misha.korolcov, 09.09.2019 в 23:18.
Ответить с цитированием
  #2 (permalink)  
Старый 09.09.2019, 02:32
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<a href="#bottom">Вниз</a>
<div style="height: 200vh;"></div>
<p id="bottom">Низ</p>

<style>
	html {
		scroll-behavior: smooth;
	}
</style>
Ответить с цитированием
  #3 (permalink)  
Старый 09.09.2019, 02:49
Аспирант
Отправить личное сообщение для misha.korolcov Посмотреть профиль Найти все сообщения от misha.korolcov
 
Регистрация: 05.09.2019
Сообщений: 84

спс но мне нужен что по умолчанию он имел display:none потом при покрутке странице вниз он появляеться а при покрутке верх убиралса как например здесь https://fxwindsor.com/public/en
Ответить с цитированием
  #4 (permalink)  
Старый 09.09.2019, 05:19
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<div style="height: 200vh;">Крути вниз!</div>
	
<button class="scroll-to-top-button" onclick="window.scrollTo(0, 0);">▲</button>
<script>
addEventListener("scroll", () => {
	document.documentElement.classList.toggle("scroll-to-top-button-is-visible", scrollY > 0.5 * innerHeight)
}, { passive: true });
</script>
<style>
html {
	scroll-behavior: smooth;
}
.scroll-to-top-button {
	font-size: 300%;
	border: none;
	outline: none;
	width: 1.5em;
	height: 1.5em;
	background: #345;
	position: fixed;
	right: .2em;
	bottom: .2em;
	border-radius: .2em;
	line-height: 0;
	color: white;
	opacity: 0;
	pointer-events: none;
	transition: 300ms opacity;
}
.scroll-to-top-button-is-visible .scroll-to-top-button {
	opacity: 1;
	pointer-events: all;
}
</style>


UPD В данном случае outline: none; не ломает доступность, поскольку переместиться в начало страницы при помощи клавиатуры можно нажав клавишу Home, а на сенсорном экране обратной связью об удачном нажатии кнопки будет само перемещение в начало страницы.

Последний раз редактировалось Malleys, 09.09.2019 в 05:35.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
якорь + доп параметры igor_ch jQuery 7 25.03.2017 21:40
Плавная прокрутка вверх и вниз по пикселю с помощью jquery zulyamodx jQuery 5 28.11.2016 13:42
Какое событие происходит при скроллинге вниз и вверх? alex-lenk Общие вопросы Javascript 1 09.06.2016 09:18
scrollTop на якорь с отступом vah-smile jQuery 1 13.11.2014 19:19
Обновление чата. сбрасывает скролл вниз Gerg007 AJAX и COMET 15 23.06.2012 21:57