Есть блок с текстом и кнопка, которая ведёт наверх экрана и которая появляется по мере прокручивания текста вниз.
Везде отрабатывает хорошо за исключением
iphone в браузере safari (кнопка не прокручивает в самый верх блока) в силу того, что мобильный сафари не знает метода
getBoundingClientRect(). Как найти эквивалент данному методу и обучить работать в
iPhone Mobile Safari ?
// detect support for the behavior property in ScrollOptions
const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;
function SmoothVerticalScrolling(time, position) {
var eTop = document.body.getBoundingClientRect().top;
var eAmt = eTop / 100;
var curTime = 0;
while (curTime <= time) {
window.setTimeout(SVS_B, curTime, eAmt, position);
curTime += time / 100;
}
}
function SVS_B(eAmt) {
window.scrollBy(0, eAmt);
}
// Animate scroll to up
const btnUp = document.querySelector('.btn_to_up');
if (btnUp) {
btnUp.addEventListener('click', function(e) {
e.preventDefault();
if (supportsNativeSmoothScroll) {
document.querySelector('html,body').scrollIntoView({
behavior: 'smooth'
});
} else {
SmoothVerticalScrolling(600, "top");
}
});
let wHeight = document.documentElement.clientHeight;
function ScrollResizeFunction(e) {
if (pageYOffset >= wHeight) {
btnUp.classList.add('active');
} else {
if (btnUp.classList.contains('active')) {
btnUp.classList.remove('active');
}
}
}
window.addEventListener('load', function(e) {
window.addEventListener('scroll', ScrollResizeFunction);
window.addEventListener('resize', ScrollResizeFunction);
});
}
.body {
position: relative;
}
.btn_to_up {
position: fixed;
bottom: 30px;
right: -50px;
background-size: contain;
border-radius: 50%;
width: 48px;
height: 48px;
transition: 0.3s;
background: blue;
cursor: pointer;
}
.btn_to_up.active {
right: 30px;
}
<div class="body">
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Temporibus impedit hic nesciunt voluptatibus commodi aliquid, quis sequi doloribus? Nobis amet aut iste assumenda odio atque expedita perferendis repellendus tempora voluptatum.</div>
<div class="btn_to_up"></div>
</div>
