当前位置:网站首页>让页面滚动到指定位置
让页面滚动到指定位置
2022-08-10 16:04:00 【前端小草籽】
//页面一加载出来就滚动到我们想要的位置去(操作整个窗口的滚动)
//注意点:window.scroll(0,200)表示:页面一打开就滚动到指定位置,所以不能在页面内刷新,必须每次刷新都要重新打开一个页面
//在页面内刷新实现不了 页面打开 这个功能,所以也就 window.scroll(0,200)没有效果
//window.scroll(x,y); //水平滚动距离x,垂直滚动距离y;
//window.scrollTo(0,200); //也是操作页面(窗口)滚动,与 window.scroll(0,200)类似
//window.scrollBy(x,y);//也是操作页面滚动,但是与前两个有差异
它是:则是 滚动条在当前位置的基础上,再次移动x,y像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
height: 1000px;
background-color: #ccc;
}
.box{
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="content">content1</div>
<div class="box">box</div>
<div class="content">contetn2</div>
<script>
//页面一加载出来就滚到到我们想要的位置去(操作整个窗口的滚动)
//注意点:window.scroll(0,200)表示:页面一打开就滚到到指定位置,所以不能在页面内刷新,必须每次刷新都要重新打开一个页面
//在页面内刷新实现不了 页面一打开 这个功能,所以也就 window.scroll(0,200)没有效果
//window.scroll(0,200); //水平滚动距离x,垂直滚动距离y;
//window.scrollTo(0,200); //也是操作页面(窗口)滚动,与 window.scroll(0,200)类似
// window.scrollBy(0,200);//也是操作页面滚动,但是与前两个有差异
let box = document.querySelector('.box');
box.onclick = function(){
// window.scroll(0,200);
window.scrollBy(0,200);
}
</script>
</body>
</html>
边栏推荐
猜你喜欢
随机推荐
LeetCode-692. Top K Frequent Words
Please check the preparation guide for the 2022 Huawei Developer Competition
dedecms支持Word内容自动导入
秘密共享方案介绍SS
Andorid源码编译需要掌握的shell语法(三)
异形屏为led显示行业带来更多希望
困扰已久的一个微信bug
2022年软考复习笔记一
推荐几款最好用的MySQL开源客户端,建议收藏!
FP6378AS5CTR SOT - 23-5 effective 1 mhz2a synchronous buck regulator
视频转成gif动图怎么操作?仅需三步在线完成视频转gif
易基因|深度综述:m6A RNA甲基化在大脑发育和疾病中的表观转录调控作用
Redis存储验证码
Pigsty:开箱即用的开源数据库发行版
Copper lock password library
二维费用的背包问题 ← 模板题
【每日一题】【leetcode】26. 链表-链表中倒数第k个节点
photoshop入门教程
FTXUI按键和ROS2 CLI组合使用笔记(turtlesim+teleop)
spark面试常问问题