如何在不影响部分的情况下放大/缩小我的网站

Question

我制作了这个剧本:

<script>
        $(document).ready(function() {

            var huser = window.screen.availHeight;
            var wuser = window.screen.availWidth ;

            var scr_zoom = Math.round((wuser*69)/1280);

           document.body.style.zoom = scr_zoom + "%"
           document.head.style.zoom = scr_zoom + "%"


});

</script>

根据用户屏幕的大小缩放我的网页.它工作正常,但问题是在我的导航中:

<div id="panel">
    <ul class="nav">
        <a href="#section1"><li id="hm">home</li></a>
        <a href="#section2"><li id="abt">about</li></a>
        <a href="#section3"><li id="wk">work</li></a>
    </ul>
</div>

我还有一个滑块攻击菜单:

        $(function() {
            $('ul.nav a').bind('click',function(event){
                var $anchor = $(this);

                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1500,'easeInOutExpo');
                event.preventDefault();
            });
        });

这定义了我的部分:

.section{
    margin:0px;
    height:1000px;
    width:100%;
    float:left;
   /* text-shadow:1px 1px 2px #f0f0f0; */
    overflow:hidden;  
    z-index:29;
}

每次我点击"工作"部分或"关于"它只是滑动错误到另一个位置.任何想法为什么会这样？

你可以在这里看到问题:

http://testedesignfranjas.tumblr.com/

到目前为止我发现了什么......

在滑块的这一行:scrollTop:$($ anchor.attr('href')).offset().top它只是不按预期滑动,我的事情是&计算错误.

PS:该网站在firefox上运行良好...... :(

Answer 1

好的，伙计们，我找到了这个特殊情况的解决方案。

问题是我正在使用 .offset().top ，因为我听说这个 jquery 中的转换存在一个错误。我将 .offset() 更改为 javascript“.offsetTop”，一切都开始正常工作。

您可以在这个 stackoverflow 问题中看到偏移函数的差异：

offsetTop 与 jQuery.offset().top