请使用
fullPagejs插件。可以自行百度一下。
参考代码：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
color: #FFFFFF;
}
section1 {
background-color: #BFDA00;
}
section2 {
background-color: #2EBE21;
}
section3 {
background-color: #2C3E50;
}
</style>
<title></title>
<link rel="stylesheet" href="css/jqueryfullPagecss" />
<script type="text/javascript" src="//js/jqueryjs"></script>
<script type="text/javascript" src="js/jqueryfullPagejs"></script>
<script>
$(function() {
$("#ido")fullpage();
});
</script>
</head>
<body>
<div id="ido">
<div class="section section1">
<h1>每一个section是一屏，这是第一屏</h3>
</div>
<div class="section section2">
<h1>每一个section是一屏，这是第二屏</h3>
</div>
<div class="section section3 active">
<h1>每一个section是一屏，这是第三屏</h3>
</div>
<div class="section section4">
<h1>每一个section是一屏，这是第四屏</h3>
</div>
</div>
</body>
</html>
css js 自己引用啊
获取浏览器显示区域的高度 ：
$(window)height();
获取浏览器显示区域的宽度 ：
$(window)width();
获取页面的文档高度 ：
$(document)height();
获取页面的文档宽度 ：
$(document)width();
获取滚动条到顶部的垂直高度 ：
$(document)scrollTop();
获取滚动条到左边的垂直宽度 ：
$(document)scrollLeft();
计算元素位置和偏移量：
$(id)offset();
$(obj)offset()top - $(window)scrollTop()。
拓展：
1、jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的 *** 作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。
2、jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。由于目前高校基本尚未开JavaScript的相关课程，目前jQuery的学习，使用，研究都仅限于在职Web程序员之间。
Jquery可以用height(),来获取DOM元素的高。示例如下：
<script src=">看明白了吗？？
你要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了
要获取底端 只要获取scrollTop()>=$(document)height()-$(window)height() 就可以知道已经滚动到底端了
$(document)height() //是获取整个页面的高度
$(window)height() //是获取当前 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的 根据英文应该也能理解吧
其实你可以自己做个实验就知道了
$(document)scroll(function(){
以上就是关于如何用js或jquery控制滚动条到指定位置全部的内容，包括:如何用js或jquery控制滚动条到指定位置、jquery 如何获取滚动条的宽度、jquery 如何获得一个元素（比如div）的底部（或顶部）距屏幕顶部距离的象素值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）