Я сделал сценарий для верхней части, который отлично работает в Safari и Chrome, но не совсем, на iOS -устройствах. Не могу узнать, почему.
Упрощенный html выглядит следующим образом:
<div class="top_btn">...</div>
<div class="content">...</div>
<div class="footer">...</div>
К верхнему-div-кнопки фиксирован, css -> bottom: 20px, правый 20px и со следующим кодом это работает нормально и на iOS:
toTop = jQuery('.top_btn');
function scrollFunction() {
if (document.body.scrollTop > 240 || document.documentElement.scrollTop > 240) {
toTop.css('display', 'block');
} else {
toTop.css('display', 'none');
}
}
window.onscroll = function() {scrollFunction()};
jQuery('.top_btn').click(function(e) {
e.preventDefault()
jQuery('html, body').animate({scrollTop: jQuery('body').offset().top},250,'linear')
});
Когда я прокручиваю вниз до элемента нижнего колонтитула, верхняя кнопка частично покрывает нижний колонтитул, чего я стараюсь избегать. Поэтому я изменил свой скрипт следующим образом:
var toTop = jQuery('.top_btn');
//get value of css bottom-property
var bo = parseInt(jQuery('.top_btn').css('bottom'));
function scrollFunction() {
if (document.body.scrollTop > 240 || document.documentElement.scrollTop > 240) {
toTop.css('display', 'block');
} else {
toTop.css('display', 'none');
}
//top of footer
var toe = jQuery(".footer").offset().top;
//bottom footer
var boe = jQuery(".footer").offset().top + jQuery(".footer").outerHeight();
// bottom of screen
var bos = jQuery(window).scrollTop() + jQuery(window).innerHeight();
// top of screen
var tos = jQuery(window).scrollTop();
if ((bos > toe) && (tos < boe)){
var bn = (bo - (toe - bos))+ 'px';
jQuery('.top_btn').css('bottom', bn);
}
}
window.onscroll = function() {scrollFunction()};
jQuery('.top_btn').click(function(e) {
e.preventDefault()
jQuery('html, body').animate({scrollTop: jQuery('body').offset().top},250,'linear')
});
При iOS прокрутка вниз все работает нормально, пока нижний колонтитул не войдет в область просмотра. Кнопка по-прежнему охватывает элемент нижнего колонтитула. Когда я снова прокручиваю вверх, он переходит вверх на позицию, которая должна быть, на 20 пикселей выше элемента нижнего колонтитула.
Здесь вы найдете пример: Пример страницы (допустимо около 7 дней)
Любые советы?
С уважением, Джо