文章/答案/技术大牛

发布

问Javascript ScrollTo锚
EN

Stack Overflow用户

提问于 2013-11-23 15:36:26

回答 1查看 1.4K关注 0票数 0

大家好，我对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>

以及不同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);
});

非常感谢您的帮助！

汤姆

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-11-23 15:56:20

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

https://github.com/peachananr/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()。您可以获得任何可见元素的坐标(以及从顶部的距离)，如下所示：

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

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

$(document).scrollTop(200)

祝你好运，希望它能帮上忙！

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20164209

复制

相似问题

问Javascript ScrollTo锚
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript ScrollTo锚EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript ScrollTo锚
EN