开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在显示Body前触发javascript scrollTop()？

在显示Body前触发JavaScript的scrollTop()函数，可以通过以下步骤实现：

首先，在HTML文件中引入JavaScript代码。可以通过在<head>标签内使用<script>标签或外部引入.js文件的方式来实现。
在JavaScript代码中，使用window.onload事件来确保在页面完全加载后执行代码。这样可以确保在显示Body前触发scrollTop()函数。
在window.onload事件的回调函数中，使用scrollTop()函数来设置滚动条的位置。scrollTop()函数用于获取或设置元素的垂直滚动条位置。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <script>
    window.onload = function() {
      // 在显示Body前触发scrollTop()函数
      window.scrollTo(0, 0);
    };
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

在上述示例代码中，通过window.scrollTo(0, 0)将滚动条的位置设置为页面顶部，实现在显示Body前触发scrollTop()函数。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）

产品介绍链接地址：https://cloud.tencent.com/product/cvm

腾讯云云服务器（CVM）是腾讯云提供的一种弹性计算服务，可为用户提供安全可靠、弹性扩展的云端计算能力。用户可以根据实际需求选择不同配置的云服务器实例，满足各类应用的需求。腾讯云云服务器支持多种操作系统和应用软件，并提供了丰富的网络和存储选项，适用于各种场景，包括网站托管、应用程序部署、大数据分析、人工智能等。

请注意，以上答案仅供参考，具体的实现方式和推荐产品可能会根据实际需求和环境而有所不同。

相关搜索:如何在JavaScript中显示正在加载的GIF图像或打印大型PDF文件前的“请稍候”信息如何在Chrome的控制台中对HTML元素(如tbody> tr > td)触发dbclick事件？我需要通过javascript代码来完成(为了实现流程自动化)php 参数强制类型 php怎声明一个数组 php 大数据算法库 php 并发发送请求 php 域名被封检测 php 实现站内搜索 php语句连接数据库 php 输出多个字符

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

native 嵌套H5弹出虚拟键盘遮挡界面及其input 文本框上提及其置顶显示

在于你的布局，可以用定位position:fixed;来做处理，因为他相对于页面来说，定位于屏幕一定的位置。

02

React----组件生命周期知识点整理

如果是自定义方法，React不会自己去调用，因此一般使用变量+箭头函数的形式，将该自定义方法作为一个事件的触发函数

04

这实现牛逼了，原来阮大佬博客的阅读进度功能这么简单

小包在学习阮一峰大佬的《ES6入门教程》时，对文章顶部的阅读进度功能产生了浓厚的兴趣。小包当时猜想应该是使用 JavaScript 实现的，但最近爱上了浩如烟海的 CSS ，于是小包有个大胆的想法，单纯的 CSS 能实现阅读进度功能吗？

03

利用本地存储，记录滚动条的位置

在一定时间范围内，用手机微信打开之前浏览过的订阅号的文章，文章显示出来的是你上次阅读到的位置，而不是从头开始显示。手机微信是怎么知道你文章阅读的位置？前端工程师能否实现该功能？本文主要内容： 1、功能介绍 2、功能分析 3、知识要点 4、具体实现 5、总结 1、功能介绍为了让大家更清楚的知道今天要学习的效果，先一起来体验一下吧。我们先在手机微信打开HTML5学堂订阅号中的文章，当文章浏览到某一个位置的时候点击左上角返回，然后再次点击刚刚浏览过的那篇文章，显示出来的是你刚才阅读到的位置，而不是从头开始显示

07

JS事件篇

浏览器加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面上边，在代码执行的时候，页面还没有完全加载

01

js、jQuery 获取文档、窗口、元素的各种值

浏览器当前窗口文档body的宽度： document.body.clientWidth;(仅仅是body的width) 浏览器当前窗口文档body的高度： document.body.clientHeight;(仅仅是body的height)

03

原生态纯JavaScript 100大技巧大收集---你值得拥有(51--100)

56、原生JavaScript全角半角转换,iCase: 0全到半，1半到全，其他不转化

02

zepto 基础知识(4)

61.prev 　　prev() 类型：collection 　　prev(selector) 类型：collection 　　获取对相集合中每一个元素的钱一个兄弟节点，通过选择器来进行过滤 62.prev 　　prev() 类型：collection 　　prev(selector) 类型：collection 　　获取对象集合中每一个元素的前一个兄弟节点，通过选择器用来进行过滤。 63.prop 　　prop(name) 类型：valu

onbeforeunload事件被a链接触发的问题

onbeforeunload本身并非W3C DOM-Event标准事件，只不过在很多时候国内的流氓做法就是离开页面，直接弹出收藏本网页的提示（虽然我很讨厌这种做法，但事实上很多公司一直都在这样默默地强奸用户…）

02

防抖函数与节流函数

原文 https://www.cnblogs.com/chenqf/p/7986725.html

03

html左侧浮动广告代码,jQuery 浮动广告实现代码[通俗易懂]

$(this).scroll(function() { // 页面发生scroll事件时触发

01

记好这24个ES6方法，用于解决实际开发的JS问题

页面DOM里的每个例程上都有一个classList对象，程序员可以使用里面的方法添加，删除，修改例程的CSS类。使用classList，程序员还可以用它来判断某处是否被替换了某人个CSS类。

00

jQuery基础

使用jQuery时， $ 是访问jQuery的标志，但是如果有其他方法与jQuery中的 $冲突时，可以释放$的使用权，还可以自定义一个符号来代替 $使用。

02

点击按钮，回到页面顶部的5种写法

2.scrollTop:scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度

03

Web前端JQuery入门实战案例

快速的，轻量级的，功能丰富的 js 库。动画(animation)，ajax，DOM，更简单，容易使用的api。

01

jquery 置顶按钮

这个图片我用了阿里的矢量图库，如果不懂如何使用的朋友，可以访问iconfont阿里巴巴矢量图标库从注册到使用。

03

scrollwidth和clientwidth_vue监听页面滚动

本文并非原创，只是真心觉得好，特别是图解的很到位，我在js中经常会用到，就记下来，与大家分享。

01

实现图片懒加载的三种方式(前端路由懒加载原理)

图片懒加载就是鼠标滑动到哪里，图片加载到哪里。总的来说，一般页面打开，会同时加载页面所有的图片，如果页面的图片请求太多会造成很卡很慢的现象，为了避免这一现象，利用懒加载图片的方法，提高性能（典型：淘宝）

01

基于JS实现回到页面顶部的五种写法(从实现到增强)

使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置

02

vue3实现元素监听滚动事件

使用的时候，通过监听到达底部的变量改变，可以做想做的事情，比如加载更多，或跳转页面等。

02

什么是 JavaScript 事件？

JavaScript事件是指在网页中发生的交互性操作或特定的系统事件，例如用户的点击、鼠标移动、按键按下等。通过JavaScript，你可以捕捉和处理这些事件，并在事件发生时执行相应的代码。

02

干货丨JS 经典实例收集整理

一、跨浏览器事件跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } } 跨浏览器移除事件 //跨浏览器移除

02

JS实现无限分页加载——原理图解

由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。传统的数据展现都以分页的形式，但是分页的效果并不好，需要用户手动点击下一页，才能看到更多的内容。有很多网站使用无限分页的模式，即网页视窗到达内容底部就自动加载下一部分的内容... 本篇就无限分页的实现模型，讲述其中奥妙。原理图实现无限分页的过程大致如下： 1 视窗滚动到底部 2 触发加载，添加到现有内容的后面。因此，可能会出现两种情况： 1 当页面的内容很

防抖和节流

防抖和节流的核心就是定时器，我们要知道定时器的一个概念，就是在定时之后，在没触发之前清除定时器，这个定时器方法不会被触发。

02

SCrollTOP scrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。

02

JQuery Div scrollTop ScrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。

01

实现图片懒加载（及优化相关）

工作之余想要休闲一下（看-美-女-图），但是又觉得单纯休闲不利于自身进步，于是 ……

01

js 做返回顶部效果

document.documentElement.scrollTop ==>> 非IE滚动的距离

03

jQuery基础--jQuery特殊属性操作

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

02

第52天：offset家族、scroll家族和client家族的区别

一、offset家族 1、offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族，用来获取元素尺寸。 offsetWidth = width + padding + border offsetHeight = height + padding + border 2、offsetLeft 和 offsetTop: 返回距离上级带有定位的盒子左边的位置，如果父级元素没有定位，则以body为准 offsetLeft从父亲的

02

📚一站式解决：H5开发全攻略，看这篇让你省时又省力

在 H5 中，我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。这两种单位可以让页面元素的大小随着根元素（对于 REM）或视口宽度（对于 VW）的大小变化而变化，从而适应不同尺寸的屏幕。

02

百度Web前端技术学院(2)-JavaScript 基础

百度前端学院的第二次任务笔记，JavaScript 基础。主要有JavaScript的定义，数据类型，对象，数组，字符串，正则表达式，DOM，事件，BOM，Ajax 等知识。

04

基于Bootstrap垂直响应的jQuery时间轴特效

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/63683690

04

搜索结果列表下拉滑动触底时，自动加载更多搜索结果怎么实现?

实现搜索结果列表下拉滑动触底时自动加载更多搜索结果的功能，通常涉及到前端页面滚动事件的监听、后端数据接口的调用以及前端列表的渲染。以下是一个基本的实现步骤和示例：

01

scrollWidth,clientWidth,offsetWidth的区别

网页可见区域宽：document.body.clientWidth; 网页可见区域高：document.body.clientHeight; 网页可见区域高：document.body.offsetWeight: 网页可见区域高：document.body.offsetHeight; 网页正文全文宽：document.body.scrollWidth; 网页正文全文高：document.body.scrollHeight; 网页被卷去的高：document.body.scrollTop; 网页被卷去的左：document.body.scrollLeft; 网页正文部分上：window.screenTop; 网页正文部分左：window.screenLeft; 屏幕分辨率的高：window.screen.height; 屏幕分辨率的宽：window.screen.width; 屏幕可用工作区高度：window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth;

02

深入了解浏览器的重绘与重排

重绘与重排是浏览器渲染的重要动作，对前端性能影响非常大，所以值得多了解一下什么是重绘与重排？重绘是一个改变元素外观的行为，例如改变visibility、背景色等属性重排是浏览器重新计算各个元素的排列位置，需要重新进行布局计算，例如改变元素的宽高、元素内的内容重绘不会带来重新布局，并不一定伴随重排，但重排一定会导至重绘哪些操作会引起重排？（1）改变DOM元素的几何属性某元素的几何属性发生变化时，会触发子节点、兄弟节点、祖先节点重新计算，也就是所有元素都得重新计算大小、位置，整个页

07

python自动化17-JS处理滚动条

selenium并不是万能的，有时候页面上操作无法实现的，这时候就需要借助JS来完成了。

02

页面返回顶部代码_网页回到顶部代码

1 使用文字添加方法最简单的是：最简单的“返回顶部”代码就是“返回顶部”（不包括引号），(0,0)代表座标，第一位是水平，第二位是垂直，(0,0)就表示网页左上角，文字部分（返回顶部）可以自由替换成自己需要的内容，比如也可以用“TOP”都可以。

04

利用JQuery实现鼠标移动到图片上方的时候显示二维码，离开的时候不显示二维码

今天给大家介绍一下怎样利用JQuery实现鼠标移动到图片上方的时候显示二维码，离开的时候不显示二维码的功能。其实主要注意几点细节就可以轻松实现这样的功能了，第一点就是设置一个div不显示并且位置设置

09

JavaScript 学习总结

Java和Javascript的区别就像印度和印度尼西亚的区别，名字中有点相同的东西。

04

移动端Webapp中的那些Bug

持续更新… 测试浏览器 Chrome: 61.0.3163.73 Safari: 10.0（IOS 10.3.3） Github: webapp-bugs 1. IOS overflow: scrol

05

JavaScript代码获取浏览器的可视高、文档滚动高和滚动距离

说明：这段代码用于获取浏览器窗口的可视高度。它首先检查 document.body.clientHeight 和 document.documentElement.clientHeight 是否都存在，然后根据情况选择较小的值作为可视高度。如果其中一个不存在，则将另一个值作为可视高度。

00

大佬日常必备的JS工具函数大全

前面我们分享过一篇：前端常用的60多种JavaScript工具方法，很多人觉得有用，今天再分享一篇类似的东西，如果文章和笔记能带您一丝帮助或者启发，请不要吝啬你的赞和收藏，你的肯定是我前进的最大动力

01

js实现带框拖拽

带框拖拽目录代码实例代码解析下载源码链接代码实例 <!DOCTYPE html> <html> <head> <title>带框拖拽</title> <style type="text/css"> .div1{ width:400px; height: 400px; background: blue; position: relative; margin: 20px; } .drag1{

03

JavaScript 自定义html元素鼠标右键菜单

在触发contextmenu事件时，取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象，来确定鼠标的点击位置，作为显示菜单的left和top值

03

滑动到底部无限加载的实现

我们常常会碰到数据条数很多，需要分页显示的情况。对于移动端页面，我们一般会用每次滚动到接近页面底部时，加载更多（下一页）数据的方式。本文就来介绍下滑动到底部无限加载的实现。

02

【前端词典】滚动穿透问题的解决方案

随着移动端市场的份额越大，需求就越多样化。我们今天讨论的是移动端的滚动穿透问题。上面这段调侃的话可以看出需求中弹窗浮层还是挺常见的，那这个和滚动穿透有什么联系呢？

05

html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight…

浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight

02

原生JS实现各种运动之悬浮侧边栏

在做网站开发的时候，经常会用到悬浮的侧边栏，让一些信息一直显示在当前的屏幕下，如联系方式与分享，下面给大家分享一个小Demo，实现效果如下：

02

「jQuery」基础 - 02

请注意，本文编写于 2073 天前，最后修改于 173 天前，其中某些信息可能已经过时。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭