让页面滚动到指定位置

已于 2022-08-10 17:16:44 修改
阅读量1.9k 收藏
点赞数
分类专栏： Dom操作 文章标签： 前端
于 2022-08-10 01:43:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47075145/article/details/126258690
版权

//页面一加载出来就滚动到我们想要的位置去(操作整个窗口的滚动)

 //注意点: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>

前端小草籽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定时关闭广告2020/11/24
weixin_50286102的博客
11-24 517
setTimeout(function() { ad.style.display = ‘none’ }, 2000) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
滚动页面到指定位置实现
qq_26715417的博客
05-14 567
scrollTop 滚动到某位置 document.documentElement.scrollTop = 0 scrollTo，scrollBy，scroll滚动到某位置 this.$refs.DOM.scrollTo(0, 200) scrollIntoView() 实现滚动到具体某元素 document.getElementById('invoice-form').scrollIntoView()
(转)用Javascript获取页面元素的位置
weixin_30872157的博客
09-23 228
制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的绝对大小和相对大小 首先，要明确两个基本概念。 一张网页的全部面积，就是它的绝对大小。通常情况下，网页的绝对大小由内容和CSS样式表决定。 网页的相对大小则是指在浏览器窗口中看到的那部分网页，也就是浏览器窗口的大小，又叫做viewport（...
JS 滚动条控制
最新发布
weixin_45456477的博客
07-20 510
缺点：需要添加不必要的属性，且不能控制距离顶部的偏移量，如果顶部有遮盖层，会被遮盖。当产生滚动条的元素不是windows元素时,window.scrollTo就会失效。优点：可以控制元素滑到顶部后的偏移量，且可以添加smooth值让滚动变得丝滑。此时我们需要先获取产生滚动条的父元素，将window替换为这个父元素。缺点：如果页面情况更加复杂，此方案还是会产生不可预料的问题。缺点：需要知道产生滚动条的元素，否则无法生效。优点：代码简单，可靠性高。缺点：不能指定偏移量。
localStorage和sessionStorage之间的区别？
weixin_47450807的博客
03-22 1万+
一、写在前面 今天总结一下localStorage和sessionStorage之间的区别。 二、具体区别 2.1、声明周期的区别 localStorage是永久存储在浏览器中，只要当用户不删除数据，则该数据就会一直存放在localStorage中。sessionStorage是会话级别的存储，从名字session我们就可以看出来了，也就是当用户关闭浏览器，此时数据就会被销毁。 2.2、存储大小：localStorage和sessionStorage存储大小都是5MB。 2.3、sessionStorage
LocalStorage和sessionStorage之间的区别
热门推荐
fcdd123的专栏
02-21 3万+
在HTML 5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。由于web SQL的实现是基于SQLite，它更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，故其API接口目前已经不属于HTML 5的范畴。因此，目前我们常讲的HTML 5本地存储，多指的是web Storage。
session与cookie的区别以及HTML5中WebStorage理解
weixin_30566111的博客
07-27 497
一、session与cookie的区别 二、HTML5中WebStorage理解 WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。 WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。 HTML5的WebStorage提供了两...
js滚动到指定位置
weixin_30768175的博客
12-27 764
序言：在网络上百度，关键字：“js div滚动到指定位置”，结果基本上大同小异！各种大神都给我们总结出来了四种滚动到指定位置的办法，可惜再下愚钝，每个都不会用，所以写了一个超级简单的方法来使初学者一看就懂，我们可以用逻辑来代替一部分技术！这里我们只用到一个属性就可以达到要求，其他根据自己的逻辑判断即可！获取到你最外层的div的id，然后获取属性scrollTop，然后想好逻辑，给scroll...
js将滚动条滚动到指定位置的简单实现方法
10-22
在网页开发中，有时我们需要让页面的滚动条自动滚动到特定的位置，比如某个元素所在的位置，以引导用户关注或提供更好的浏览体验。本篇文章将详细讲解如何使用JavaScript实现这一功能。 首先，我们要明白滚动条滚动...
微信小程序页面滚动到指定位置代码实例
10-16
在微信小程序开发中，有时我们需要实现页面滚动到指定位置的功能，比如用户点击一个按钮后，页面自动滚动到某个特定的组件或元素。本教程将详细解释如何实现这一功能，并通过具体的代码实例进行演示。 首先，我们...
微信小程序点击滚动到指定位置的实现
10-15
7. 最后，调用`wx.pageScrollTo()`，传入`scrollTop`值和滚动动画的持续时间，实现页面滚动。 对于滚动容器内的滚动，比如在一个`scroll-view`组件中，计算方式略有不同。以下是一个例子： ```javascript var ...
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案
08-31
总的来说，处理iOS系统上滚动条滚动到指定位置出现空白页面的问题，需要理解 `-webkit-overflow-scrolling` 的工作原理，并根据实际情况调整其使用方式。通过合理地切换这个属性的值，可以有效地规避问题，同时尽...
elementUI滚动条,点击dom元素滚动到指定位置.pdf
12-16
ElementUI 滚动条点击 DOM 元素滚动到指定位置的实现细节需要考虑多个方面，包括滚动条的状态、事件处理函数和动画效果。通过使用 ElementUI 的滚动条组件和 Vue.js 的 Composition API，我们可以快速实现滚动条的...
localStorage和sessionStorage的区别
weixin_57446003的博客
05-13 3097
区别如下： 1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 2、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。 4、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。 5、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览
localStorage与sessionStorage的区别
a_144639111216的博客
12-06 141
在之前的面试当中经常会被问到localStorage与sessionStorage的区别。通常我的回答都比较简单和我对它的理解一样：localStorage是永久存储，除非手动清除，否则会一直保存在浏览器中。而sessionStorage则是在页面关闭的时候清空。 上面的回答确实是比较简单的回答，但是大致理解上倒是没什么问题，下面来详细了解下两者之间的区别： 使用上： ...
sessionStorage和localStorage的区别
cx1361855155的博客
08-03 891
sessionStorage 和 localStoraged 的用法基本一致，sessionStorage和localStorage都具有相同的操作方法，列如setItem()，getltem()和removeItem()等，引用类型的值要转换成JSON。sessionStorage和localStorage：不会自动把数据发送给服务器，仅在客户端中保存，不参加服务器通讯。localStorage：本地存储只能通过手动清除，否则会一直保存。获取指定的key本地存储的值。删除指定的key本地存储的值。...
localStorage 与 sessionStorage的区别
diefeiyixin的博客
04-12 325
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 localStorage作用: 本地存储 经典场景: 免登录 localStorage 语法: 1. 存数据: localStorage.setItem(‘属性名’,属性值) 2. 取数据: localStorage.getItem(‘属性名’) 3. 删数据: localStorage.removeItem(‘属性名’) 4. 清空数据: localStorage.clear() localStorage 注意点: 1. 永久存储,只要.
localstorage和sessionstorage的区别
绿叶的博客
12-28 569
localstorage和sessionstorage的区别前言一、sessionstorage二、localstorage 前言 今天在写项目的时候遇到了这个问题，就想要记录下来 总的来说，localStorage和sessionStorage都是window对象提供的全局属性，用途都是在浏览器中存储key/value对的数据。 一、sessionstorage sessionStorage在关闭窗口或标签页之后将会删除这些数据 二、localstorage localStorage则没有这样的特性，除
uni-app项目 实现点击一个按钮让页面滚动到指定位置 代码如何实现
06-12
在 uni-app 中，可以使用 `uni.pageScrollTo()` 方法实现页面滚动到指定位置。 具体实现代码如下： 1. 在按钮的点击事件中，调用 `uni.pageScrollTo()` 方法，指定要滚动到的位置。 ``` <!-- template --> <template> <view> <button @click="scrollToTop">回到顶部</button> <!-- 页面内容 --> </view> </template> <!-- script --> <script> export default { methods: { scrollToTop() { uni.pageScrollTo({ scrollTop: 0, // 滚动到页面顶部 duration: 300 // 滚动动画时间，单位为 ms }) } } } </script> ``` 2. 在 `uni.pageScrollTo()` 方法中，可以指定 `scrollTop` 参数来指定要滚动到的位置，单位为 px。例如，要滚动到页面顶部，可以指定 `scrollTop: 0`。 另外，可以通过 `duration` 参数来控制滚动动画的时间，单位为 ms。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值