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

Question

使用 scrollto.js 脚本使用 next/prev 按钮从一个部分导航到另一个部分工作正常。 问题是导航滚动到浏览器的顶部。如何让“容器”从浏览器顶部偏移 100 像素。 （因为固定的“顶级容器”）

（在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>

Answer 1

这是一个工作版本：http://jsfiddle.net/xU5BB/5/

我改变了什么：

您的滚动功能中不需要循环。您所需要的只是一个变量来跟踪当前部分，所以我在您的滚动功能中进行了相当多的更改。这可能不是必需的，但现在更有效了。 :)

新功能：

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

• 我删除了显示：已修复；来自 .fixed-top-container 所以#container 总是在它下面。
• 我添加了溢出：自动；到#container 以允许滚动。
• 我更改了#container 的高度。这将在容器中显示一个滚动条，但我确信有办法隐藏它。你可能不喜欢这样，但这是我让它完全按照你想要的方式工作的唯一方法。

我想就是这样。请参阅 JSFiddle。

我在某处看到有人能够通过始终使元素的宽度比窗口大一点来隐藏滚动条，因此滚动条始终不在屏幕上。这可能是你可以尝试的。

我希望这会有所帮助。 :)