单击链接时,它应垂直滚动,以使该目标div的中心与窗口的垂直中心对齐,偏移标题的高度.
– 这非常重要,无论显示器的分辨率如何,div都会居中
我正在使用jQuery和scrollTo,但无法弄清楚这需要的数学.
这是我的尝试:
function scrollTo(target) {
var offset;
var scrollSpeed = 600;
if (viewport()["width"] > 767 && !jQuery.browser.mobile) {
// Offset anchor location and offset navigation bar if navigation is fixed
offset = $(target).offset().top - document.getElementById('navigation').clientHeight;
} else {
// Offset anchor location only since navigation bar is Now static
offset = $(target).offset().top;
}
$('html, body').animate({scrollTop:offset}, scrollSpeed);
}
解决方法:
最终想通了.只是对数学愚蠢.固定页眉和页脚的偏移也适用于所有分辨率.
// scrollTo: Smooth scrolls to target id
function scrollTo(target) {
var offset;
var scrollSpeed = 600;
var wheight = $(window).height();
//var targetname = target;
//var windowheight = $(window).height();
//var pagecenterH = windowheight/2;
//var targetheight = document.getElementById(targetname).offsetHeight;
if (viewport()["width"] > 767 && !jQuery.browser.mobile) {
// Offset anchor location and offset navigation bar if navigation is fixed
//offset = $(target).offset().top - document.getElementById('navigation').clientHeight;
offset = $(target).offset().top - $(window).height() / 2 + document.getElementById('navigation').clientHeight + document.getElementById('footer').clientHeight;
} else {
// Offset anchor location only since navigation bar is Now static
offset = $(target).offset().top;
}
$('html, body').animate({scrollTop:offset}, scrollSpeed);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。