如果滚动页面也是dom没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，html5选择了scrollintoview()作为标准方法。scrollintoview()可以在所有的html元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平.
一、scrollIntoView
html
scrollIntoView
scrollIntoView(ture)元素上边框与视窗顶部齐平scrollIntoView(false)元素下边框与视窗底部齐平
css
#myDiv {height: 900px;background-color: gray;
}#roll_top {height: 900px;background-color: green;color: #FFF;font-size: 50px;position: relative;
}#bottom {position: absolute;display: block;left: 0;bottom: 0;
}js
window.onload = function () {
document.querySelector("#roll1").onclick = function () {
document.querySelector("#roll_top").scrollIntoView(false);
};
document.querySelector("#roll2").onclick = function () {
document.querySelector("#roll_top").scrollIntoView(true);
};
}二、滚动监听
html
scroll
页面结构
m18麦考林整站 for Ecshop下载m18麦考林整站 for Ecshop v2.7.3 安装方法： 1，解压rar包上传到网站根目录 2，导入sql数据库文件，到你的数据库里，可以phpmyadmin等软件 3，修改data里config.php里面的数据库 用户名 密码等信息 为你自己的数据库信息 4，安装完毕之后的后台用户名密码为： 后台地址：域名/admin 用户名：admin 密码：admin123 模板使用教程： htt
测试1测试2测试3测试4测试5
css
.main div {height: 1000px;width: 300px;margin: 20px;background-color: #C0C0C0;
}#nav {position: fixed;width: 100px;height: 200px;top: 40%;right: 10px;
}#nav div {cursor: pointer;text-align: center;
}js
$(function () {
$(window).scroll(function () {//为页面添加页面滚动监听事件var wst = $(window).scrollTop(); //滚动条距离顶端值for (var i = 1; i < 6; i++) { //加循环if ($("#f" + i).offset().top <= wst + 10) { //判断滚动条位置$('#nav div').css("background-color", "white");
$(".f" + i).css("background-color", "red");
}
}
});
$('#nav div').click(function () {
$('html,body').animate({scrollTop: $("#" + this.className).offset().top}, 500);// $("#" + this.className)[0].scrollIntoView(true);//h5 scrollIntoView()});
});全部代码
h5之scrollIntoView控制页面元素滚动 scrollIntoView
scrollIntoView(ture)元素上边框与视窗顶部齐平scrollIntoView(false)元素下边框与视窗底部齐平scroll
页面结构
测试1测试2测试3测试4测试5
