使用javascript将div从顶部强制偏移100px？

使用scrollto.js脚本，使用next/prev按钮从一节导航到另一节，效果很好。 问题是导航会滚动到浏览器的顶部。如何使“容器”从浏览器顶部偏移100px。（因为固定的“顶部容器”）

（在css中尝试了所有方法都没有成功，并且相信答案是javascript）

有没有办法在不修改scrollto脚本的情况下强制div从顶部偏移？

<!-- FIXED TOP CONTAINER 100px -->
<div id="fixed-top-container">
  ...
</div>

<!-- PREVIOUS / NEXT -->
<a id="prev" href="#">
<div id="float-previous">
</div>
</a> <a id="next" href="#">
<div id="float-next">
</div>
</a>

<!-- CONTAINER -->
<div id="container">
  <!-- SECTION 1 -->
  <div class="section current" id="section-1">Height:200px</div>
  <!-- SECTION 2 -->
  <div class="section" id="section-2">Height:400px</div>
  <!-- SECTION 3 -->
  <div class="section" id="section-3">Height:800px</div>
  <!-- SECTION 4 -->
  <div class="section" id="section-4">Height:900px</div>
  <!-- SECTION 5 -->
  <div class="section" id="section-5"><span class="style1">Height</span>:1000px</div>
</div>

<!-- SCRIPT -->
<script>
$(function() {

    function scroll(direction) {

        var scroll, i,
                positions = [],
                here = $(window).scrollTop(),
                collection = $('.section');

        collection.each(function() {
            positions.push(parseInt($(this).offset()['top'],10));


        });

        for(i = 0; i < positions.length; i++) {
            if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
            if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
        }

        if (scroll) {
            $.scrollTo(scroll, {
                duration: 600       
            });
        }

        return false;
    }

    $("#next,#prev").click(function() {        
        return scroll($(this).attr('id'));        
    });

    $(".scrolltoanchor").click(function() {
        $.scrollTo($($(this).attr("href")), {
            duration: 600
        });
        return false;
    });

});
</script>

...
高度：200px
高度：400px
高度：800px
高度：900px
高度：1000px
$（函数（）{
功能滚动（方向）{
我,，
职位=[]，
此处=$（窗口）.scrollTop（），
集合=$（'.section'）；
集合。每个（函数（）{
positions.push（parseInt（$（this.offset（）['top']，10））；
});
对于（i=0；i此处）{scroll=collection.get（i）；break；}
if（direction=='prev'&&i>0&&positions[i]>=here）{scroll=collection.get（i-1）；break；}
}
如果（滚动）{
$.scrollTo（滚动{
持续时间：600
});
}
返回false；
}
$（“#下一步，#上一步”）。单击（函数（）{
返回滚动条（$（this.attr（'id'））；
});
$（“.scrolltoanchor”）。单击（函数（）{
$.scrollTo（$（$（this.attr（“href”））{
持续时间：600
});
返回false；
});
});

以下是一个工作版本：

我改变的是：

滚动函数中不需要循环。您所需要的只是一个变量来跟踪当前部分，所以我在您的滚动函数中做了很多更改。这可能没有必要，但现在效率更高了。：）

新功能：

var current = 0; // be sure to declare as global (or pass as as argument)

function scroll(direction) {
    var scroll,
        collection = $('.section');

    if (direction == 'next') { 
        if (current < collection.length - 1) {
            scroll = collection.get(current + 1);
            current++;
        }
    } else if (direction == 'prev') { 
        if (current > 0) {
            scroll = collection.get(current - 1);
            current--;
        }
    }

    if (scroll) {
        $("#container").scrollTo(scroll, {
            duration: 100   
        });
    }

    return false;
}

var电流=0；//确保声明为全局（或作为参数传递）
功能滚动（方向）{
变量卷轴，
集合=$（'.section'）；
如果（方向==“下一步”）{
如果（当前<收集长度-1）{
滚动=collection.get（当前+1）；
电流++；
}
}else如果（方向=='prev'）{
如果（当前>0）{
滚动=collection.get（当前-1）；
当前--；
}
}
如果（滚动）{
$（“#容器”）。滚动到（滚动{
持续时间：100
});
}
返回false；
}

• I移除显示：固定；从。固定顶部容器，因此容器始终位于其下方
• 我添加了溢出：自动；到#容器以允许滚动
• 我改变了容器的高度。这将显示一个滚动条在容器中，但我相信有办法隐藏它。你可能不喜欢这样，但这是我唯一能让它完全按照你想要的方式工作的方法

我想就是这样。请参阅JSFiddle

我在某个地方见过有人能够隐藏滚动条，因为元素的宽度总是比窗口大一点，所以滚动条总是不在屏幕上。这可能是你可以尝试的

---

我希望这有帮助。：）

您是否尝试过

#容器{margin top:100px；}

？你能用你的css做一个调整吗？是的，：（，它不起作用，滚动位置从div顶部到浏览器顶部，…为什么不使用position fixed？使用position fixed可以防止滚动到部分。javascript中有没有办法抵消特定div？Coh3n，谢谢你的建议！我试过$（container）。css（{“#position position”：“absolute”，“top:$（.fixed top container）.height（）}）；但它不起作用。我会把它放在你的scroll（）函数的末尾，在return语句之前。只要在实际动画之后调用它，它就应该起作用。如果不起作用，看看你是否可以制作一个JSFIDLE来重新创建问题，这样更多的人可以处理代码。：）你的语法错了；它应该是：$（容器）.css（{“位置”：“绝对”，“顶部”：$（“.fixed-top-container”）.height（）}）；假设容器是一个有效的字符串选择器。下面是JSFIDLE：单击“上一个/下一个”按钮时，内容不应该位于固定顶部容器（从顶部算起0px）的下方，而应该位于固定顶部容器（从顶部算起100px）的下方。很抱歉，花了这么长时间，但我成功地使其工作。我将立即更新我的答案。：）没必要道歉！！！，谢谢，你的解决方案很棒！！！-另外，感谢您提到滚动条问题，这是我唯一关心的问题。