Javascript 设置onscroll div到顶部的距离_Javascript_Jquery

Javascript 设置onscroll div到顶部的距离

javascript jquery

Javascript 设置onscroll div到顶部的距离,javascript,jquery,Javascript,Jquery,我有三个div，一个菜单和三个链接，当我点击每个链接；页面滚动至相关div，然后该div的顶部滚动至页面顶部。如何设置屏幕顶部和div顶部之间的40px距离？这是我的密码： <html> <head> <style> #menu{width:100%;height:40px;background:yellow;position:fixed} #menu ul li{display:inline;padding:10p

我有三个div，一个菜单和三个链接，当我点击每个链接；页面滚动至相关div，然后该div的顶部滚动至页面顶部。如何设置屏幕顶部和div顶部之间的40px距离？这是我的密码：

<html>
<head>
    <style>
        #menu{width:100%;height:40px;background:yellow;position:fixed}
        #menu ul li{display:inline;padding:10px}
        #top, #middle, #bottom{height:800px;border-top:1px solid}
    </style>
    <script>
        window.smoothScroll = function(target) {
            var scrollContainer = target;
            do { //find scroll container
                scrollContainer = scrollContainer.parentNode;
                if (!scrollContainer) return;
                scrollContainer.scrollTop += 10;
            } while (scrollContainer.scrollTop == 0);

            var targetY = 0;
            do { //find the top of target relatively to the container
                if (target == scrollContainer) break;
                targetY += target.offsetTop;
            } while (target = target.offsetParent);

            scroll = function(c, a, b, i) {
                i++; if (i > 30) return;
                c.scrollTop = a + (b - a) / 30 * i;
                setTimeout(function(){ scroll(c, a, b, i); }, 20);
            }
            // start scrolling
            scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
        }
</script>
</head>
<body>
    <div id="menu">
        <ul>
            <li>
                <a onclick="smoothScroll(document.getElementById('top'))">Top</a>
            </li>
            <li>
                <a onclick="smoothScroll(document.getElementById('middle'))">Middle</a>
            </li>
            <li>
                <a onclick="smoothScroll(document.getElementById('bottom'))">Bottom</a>
            </li>
        </ul>
    </div>
    <div id="top"><h1>Top</h1></div>
    <div id="middle"><h1>Middle</h1></div>
    <div id="bottom"><h1>Bottom</h1></div>
</body>
</html>


#菜单{宽度：100%；高度：40px；背景：黄色；位置：固定}
#菜单ul li{显示：内联；填充：10px}
#顶部、中部、底部{高度：800px；边框顶部：1px实心}
window.smoothScroll=函数（目标）{
var scrollContainer=目标；
不{//查找滚动容器
scrollContainer=scrollContainer.parentNode；
如果（！scrollContainer）返回；
scrollContainer.scrollTop+=10；
}while（scrollContainer.scrollTop==0）；
var-targetY=0；
是否{//找到目标相对于容器的顶部
如果（目标==scrollContainer）中断；
targetY+=target.offsetTop；
}while（target=target.offsetParent）；
滚动=功能（c、a、b、i）{
i++；如果（i>30）返回；
c、 scrollTop=a+（b-a）/30*i；
setTimeout（函数（）{scroll（c，a，b，i）；}，20）；
}
//开始滚动
滚动（scrollContainer，scrollContainer.scrollTop，targetY，0）；
}


顶部


中间的


底部


顶部
中间的
底部

我不想在菜单前隐藏h1。

您只需在div中添加一些填充：

#top, #middle, #bottom{height:500px;border-top:1px solid; padding-top: 30px}

计算滚动目标时，需要测量顶栏高度

// get topbar height to offset the scroll taget coords
var topbarHeight = document.getElementById("menu").offsetHeight;

// apply scroll offset
targetY -= topbarHeight;

现场演示：

ahhh。。。减去40？不复杂你什么意思？这里是演示：@MojtabaSabeti在复制粘贴之前阅读代码，这样你就可以理解你在做什么。您必须在最后一行调用scroll（）之前粘贴它。首先，我阅读了代码并试图理解，但无法理解。谢谢，你更新的JSFIDLE帮助了我。