垂直滚动窗口中的jQuery scrollTo - Center Div [英] jQuery scrollTo - Center Div in Window Vertically

问题描述

我有一个网站使用页面顶部的固定菜单。

单击链接时，它应该垂直滚动，以便该目标div的中心与窗口的垂直中心对齐，并由标题高度偏移。
- 这是非常重要的，这样无论监视器的分辨率是什么，div都是居中的。

我使用jQuery和scrollTo，但可以'这个是我的尝试：

 <$ c $ $ $ $ 
 $ b 
 c> function scrollTo（target）{
 var offset; 
 var scrollSpeed = 600; 
 
 if（viewport（）[width]> 767&&！jQuery.browser.mobile）{
 //如果导航被固定，偏移锚点位置和偏移导航栏
 offset = $（target）.offset（）。top  -  document.getElementById（'navigation'）。clientHeight; 
} else {
 //仅在导航栏静态时偏移锚点位置
 offset = $（target）.offset（）。top; 
 
 
 $（'html，body'）。animate（{scrollTop：offset}，scrollSpeed）; 
} 
  

解决方案

最终弄明白了。对数学只是哑巴。

  // scrollTo：平滑滚动到目标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 = $（target）.offset（）。top  -  document.getElementById（'navigation'）。clientHeight; 
 offset = $（target）.offset（）。top  -  $（window）.height（）/ 2 + document.getElementById（'navigation'）。clientHeight + document.getElementById（'footer'）。clientHeight; 
} else {
 //仅在导航栏静态时偏移锚点位置
 offset = $（target）.offset（）。top; 
 
 
 $（'html，body'）。animate（{scrollTop：offset}，scrollSpeed）; 
} 
  

I have a site that uses a fixed menu on the top of the page.

When a link is clicked, it should scroll vertically so that the center of that target div aligns with the vertical center of the window, offset by the height of the header. - this is very important so that the div is centered no matter what the resolution of the monitor is

I'm using jQuery and scrollTo, but can't figure out the math needed for this.

Here's my attempt:

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);
}

解决方案

Eventually figured it out. Was just being dumb with the math. Offset with the fixed header and footer as well, works for all resolutions.

    // 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);
}

这篇关于垂直滚动窗口中的jQuery scrollTo - Center Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！