Javascript ScrollTo anchor

Question

大家好，我对 javascript 有疑问(我不太喜欢这种语言 :))。所以我想在我的网站上有一个自动滚动:我有四个 div，其中一个具有相同的高度(取决于屏幕的大小)。我希望当我滚动到底部(或顶部)时， slider 会像磁铁一样直接转到下一个(或上一个)div。所以我尝试了 scrollTo 但我不知道它是如何工作的，因为我必须听滚动...所以这是我的 html:

<!--Samsung Galaxy-->
    <div  class="bloc" id="samsungtab">
        <img src="images/samsung.png" alt="samsunggalaxytab" />
    </div>

<!--ORA-->
    <div class="bloc" id="ora">
        <img src="images/ora.png" alt="logo" />    
    </div>

<!--Oculus Rift-->
    <div class="bloc" id="oculus">
        <img src="images/oculus.jpg" alt="logo" />
    </div>

<!--Acer-->
    <div class="bloc" id="acer">
        <img src="images/acer.jpg" alt="logo" />                
    </div>

以及用于自动调整不同 div 大小的 javascript:

$(document).ready( function(){
    var hauteur = (document.documentElement.clientHeight);
    var position = hauteur/4;
    $(".bloc").css("height",hauteur);
    $("#samsungtab").css("margin-top",position);
    $("#ora").css("margin-top",position);
    $("#oculus").css("margin-top",position);
    $("#acer").css("margin-top",position);
});

非常感谢您的帮助!!!!

汤姆

Answer 1

对我来说，您似乎正在寻找这样的东西:

https://github.com/peachananr/onepage-scroll (此处演示:http://www.thepetedesign.com/demos/onepage_scroll_demo.html)

我建议您使用这个 jQuery 插件(基于您使用 jQuery 的示例中的 JS 代码)。

如果您想自己编写代码，您应该从重写 CSS 开始。通过 JS 设置 .block 元素的高度应该不是必需的，但这取决于其余 HTML 的构建方式。如果您在此处添加完整的 HTML 文件，我也可以提供帮助。

之后你应该查看jQuery's .scroll() handler .用法:

$(window).scroll(function(){

   //code that runs on scroll here

})

在这种情况下另一个有用的 jQuery 函数是 .offset() .您可以获得任何可见元素的坐标(以及距顶部的距离)，如下所示:

$('.block').offset().top。

最后，您应该查看 jQuery 的 .scrollTop()功能。您可以使用此函数获取当前滚动位置:$(document).scrollTop()，或设置所需的滚动位置:

$(文档).scrollTop(200)

祝你好运，希望对你有所帮助!