Question

你好我们有一个问题的javascript（我不是这种语言的忠实粉丝:)）。所以我想在我的网站上自动滚动：我有四个div，其中一个具有相同的高度（取决于你的屏幕大小）。我想滚动到底部（或顶部），滑块直接进入下一个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>

和javascript为不同div的自动大小：

$(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()，或设置所需的滚动位置：

$(document).scrollTop(200)

祝你好运，我希望它有所帮助！

Javascript ScrollTo锚点

1 个答案: