Итак, я сделал кнопку в правом нижнем углу моей HTML-страницы, но мне было интересно, так как я сделал это впервые, есть ли другой лучший способ сделать это, или вы, ребята, можете увидеть что-нибудь интересное в том, как я это сделал?
Этот пост в основном предназначен для того, чтобы научиться делать все правильно, так как я в этом новичок.
Спасибо за вашу помощь.
Вот мой код -> если вы хотите НАЙТИ: JSfiddle
var bottomPage = document.getElementById('bottomPage');
var topPage = document.getElementById('topPage');
var lastScrollTop = 0;
bottomPage.addEventListener('click', scrollBottom);
topPage.addEventListener('click', scrollTop);
// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
window.addEventListener('scroll', function(){ // or element.addEventListener('scroll'....
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){
bottomPage.style.display = 'none';
topPage.style.display = '';
} else {
bottomPage.style.display = '';
topPage.style.display = 'none';
}
lastScrollTop = st <= 0 ? 0 : st;
}, false);
function scrollBottom() {
window.scrollTo(0,document.body.scrollHeight);
bottomPage.style.display = 'none';
topPage.style.display = '';
}
function scrollTop() {
window.scrollTo(0, 0);
topPage.style.display = 'none';
bottomPage.style.display = '';
}
body{
height: 3000px;
background: white;
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}
.right-corder-container {
position: fixed;
right: 20px;
bottom: 20px;
vertical-align: middle;
background: #dddddd79;
text-align: center;
width: 40px;
height: 40px;
border-radius: 100%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 25px;
color: white;
font-weight: bold;
text-decoration: none
}
.right-corder-container img {
width: 40px;
height: 40px;
}
.right-corder-container:hover {
background: #85858579;
cursor: pointer;
}
<body>
<button class="right-corder-container" id='bottomPage' type="button"><img src="https://i.postimg.cc/87f0hmm2/scroll-down.png"></button>
<button class="right-corder-container" style="display: none;" id='topPage' type="button"><img src="https://i.postimg.cc/Tp4sL4gj/scroll-up.png"></button>
</body>
1 ответ
Некоторые точки JS
окно является объектом по умолчанию. Вам редко нужно его использовать. например
window.scrollTo
такой же какscrollTo
как естьwindow.document
такой же какdocument
.Вы можете использовать идентификатор элемента в качестве имени переменной JS для ссылки на элемент.
Для переменных, которые не меняются, используйте константы const скорее, чем куда или позволять
Избегайте установки значений стиля непосредственно для стиля элементов, лучше используйте правила и селекторы CSS для определения стилей.
Не допускайте попадания кода в глобальную область видимости, заключив его в IIFE (выражение немедленного вызова функции)
HTML / CSS дизайн
Создавать две кнопки не нужно. Используйте одну кнопку, чтобы упростить свой JS.
Использование селекторов CSS для определения правил для содержимого кнопок позволяет использовать одно имя класса для переключения между опциями вверх и вниз. Добавьте имя класса для «вверх» и удалите для «вниз».
Нет необходимости в
click
события, чтобы изменить состояние кнопки какscroll
событие сработает, когда вы позвоните Window.scrollTo и эта функция изменит состояние кнопки /Вы добавили
type
атрибут кнопки. В этом нет необходимости, поскольку кнопка не является частью формы.Почему вы добавили
document.documentElement.scrollTop
Element.scrollTop когда Window.pageYOffset это ноль ?? Эти два значения одинаковы! КстатиpageYOffset
это псевдоним для Window.scrollY
Переписать
Переписывание пытается сделать код JS максимально простым.
Я удалил большую часть пользовательского стиля (изображения, фон), который можно легко добавить через HTML / CSS без необходимости изменять JavaScript.
;(()=>{
var lastPos = 0, scrollToPos = document.body.scrollHeight;
scrollBtn.addEventListener("click", () => scrollTo(0, scrollToPos));
addEventListener("scroll", () => {
scrollToPos = scrollY > lastPos ? 0 : document.body.scrollHeight;
lastPos = Math.max(0, scrollY);
scrollBtn.classList.toggle("scrollUp", scrollToPos === 0);
}, false);
})();
body { height: 3000px }
#scrollBtn {
position: fixed;
right: 10px;
bottom: 10px;
cursor: pointer;
}
#scrollBtn > .top { display: none }
#scrollBtn.scrollUp > .top { display: initial }
#scrollBtn.scrollUp > .bottom { display: none }
<button id="scrollBtn">
<span class="top">Top</span>
<span class="bottom">Bottom</span>
</button>