Javascript ScrollTo anchor

Javascript ScrollTo anchor

本文关键字：anchor ScrollTo Javascript      更新时间：2023-09-26

大家好，我对javascript有问题（我不太喜欢这种语言：）。所以我希望在我的网站上有一个自动滚动：我有四个div，其中一个有相同的高度（取决于屏幕的大小）。当我滚动到底部（或顶部）时，我希望滑块直接转到下一个div（或上一个），就像磁铁一样。所以我尝试了滚动到，但我不知道它是如何工作的，因为我必须听滚动。。。这是我的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);
});

提前非常感谢您的帮助！！！！

Tom

对我来说，你似乎在寻找这样的东西：

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

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

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

之后，您应该查看jQuery的.scroll（）处理程序。用法：

$(window).scroll(function(){
   //code that runs on scroll here
})

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

CCD_ 2。

最后，您应该研究一下jQuery的.scrollTop（）函数。您可以使用此功能获取当前滚动位置：$(document).scrollTop()，或设置所需滚动位置：

$(document).scrollTop(200)

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

相关文章：