首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在javascript中设置正文垂直滚动中的百分比高度?

在JavaScript中设置正文垂直滚动的百分比高度可以通过以下步骤实现:

  1. 首先,获取正文的高度。可以使用document.body.offsetHeight来获取整个正文的高度。
  2. 然后,计算所需滚动的像素值。将正文高度乘以所需滚动的百分比,再除以100,即可得到需要滚动的像素值。
  3. 最后,使用window.scrollTo()方法将页面滚动到计算得到的像素值位置。将水平滚动位置设置为0,垂直滚动位置设置为计算得到的像素值。

以下是一个示例代码:

代码语言:javascript
复制
function setVerticalScrollPercentage(percentage) {
  var bodyHeight = document.body.offsetHeight;
  var scrollHeight = (bodyHeight * percentage) / 100;
  window.scrollTo(0, scrollHeight);
}

// 使用示例:将页面滚动到正文高度的50%位置
setVerticalScrollPercentage(50);

这样,通过调用setVerticalScrollPercentage()函数并传入所需的百分比值,就可以在JavaScript中设置正文垂直滚动的百分比高度了。

注意:以上代码仅适用于在浏览器中运行的JavaScript代码,不适用于服务器端的JavaScript环境。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

htmloffsetTop、clientTop、scrollTop、offsetTop各属性介绍(转)

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight:获取对象滚动高度 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离...scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度 offsetHeight:获取对象相对与版面或由父坐标offsetParent...垂直方向滚动值 event.clientX+documentElement.scrollTop相对文档水平坐标+垂直方向滚动量 这里是JavaScript建造迁移转变代码常用属性 网页可见区域宽...与style.width属性差别在于:如对象宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不合页面对象宽度值而不是百分比值...4.offsetHeight : 与style.height属性差别在于:如对象宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不合页面对象高度值而不是百分比

7.7K20

client中文意思是什么_javacin什么意思

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:...获取对象滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent...相对文档垂直座标 event.offsetX 相对容器水平坐标 event.offsetY 相对容器垂直坐标 document.documentElement.scrollTop...垂直方向滚动值 event.clientX+document.documentElement.scrollTop 相对文档水平座标+垂直方向滚动量 实现代码 复制代码代码如下...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

1.8K20
  • JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...相对容器水平坐标 event.offsetY 相对容器垂直坐标 document.documentElement.scrollTop 垂直方向滚动值 event.clientX+document.documentElement.scrollTop...相对文档水平座标+垂直方向滚动量 IE,FireFox 差异如下: IE6.0、FF1.06+: clientWidth = width + padding clientHeight = height...(2)在随后JavaScript代码,首先定义了两个变量winWidth和winHeight,用于保存窗口高度值和宽度值。...(3)然后,在函数findDimensions ( ),使用window.innerHeight和window.innerWidth得到窗口高度和宽度,并将二者保存在前述两个变量

    8.1K30

    JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转)

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离  scrollWidth:获取对象滚动宽度...  event.offsetX 相对容器水平坐标  event.offsetY 相对容器垂直坐标  document.documentElement.scrollTop 垂直方向滚动值 ...event.clientX+document.documentElement.scrollTop 相对文档水平座标+垂直方向滚动量  IE,FireFox 差异如下:  IE6.0、FF1.06...(2)在随后JavaScript代码,首先定义了两个变量winWidth和winHeight,用于保存窗口高度值和宽度值。...(3)然后,在函数findDimensions ( ),使用window.innerHeight和window.innerWidth得到窗口高度和宽度,并将二者保存在前述两个变量

    16.1K10

    scrollWidth,clientWidth,offsetWidth区别

    clientWidth值打 clientWidth是对象看到宽度(不含边线) offsetWidth是对象看到宽度(含边线,滚动占用宽) top、postop、scrolltop、scrollHeight...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...相对文档水平座标 event.clientY 相对文档垂直座标 clientWidth:是对象可见宽度,不包滚动条等边线,会随窗口显示大小改变。...clientHeight:都认为是内容可视区域高度,也就是说页面浏览器可以看到内容这个区域高度,一般是最后一个工具条以下到状态栏以上这个区域,与页面内容无关。...event.offsetX 相对容器水平坐标 event.offsetY 相对容器垂直坐标  document.documentElement.scrollTop 垂直方向滚动值 event.clientX

    2.2K20

    js 获取浏览器高度和宽度值(多浏览器)

    网页被卷去左: document.body.scrollLeft 网页正文部分上: window.screenTop 网页正文部分左: window.screenLeft 屏幕分辨率高...window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...event.offsetX 相对容器水平坐标 event.offsetY 相对容器垂直坐标 document.documentElement.scrollTop 垂直方向滚动值...event.clientX+document.documentElement.scrollTop 相对文档水平座标+垂直方向滚动量 < !

    10.4K60

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

    基于两年开发经验,总结了 javascript、jQuery 获取窗口、文档、元素各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body宽度: document.body.clientWidth...; 浏览器整个文档高: document.body.scrollHeight; 获取竖直滚动条到顶部垂直高度 (即网页被卷上去高度)(其他浏览器):document.body.scrollTop;...获取竖直滚动条到顶部垂直高度 (即网页被卷上去高度)(ie浏览器): document.documentElement.scrollTop; 获取水平滚动条到左边水平宽度 (即网页被卷左去宽度...; 滚动内容高度:boxx.scrollHeight;//利用这个可以使滚动条一直在底部 网页正文部分上: window.screenTop; 网页正文部分左: window.screenLeft...body宽度: $(document.body).width(); 获取竖直滚动条到顶部垂直高度 (即网页被卷上去高度) :$(document).scrollTop(); 获取水平滚动条到左边水平宽度

    14.1K32

    js 获取浏览器高度和宽度值(多浏览器)

    : document.body.scrollLeft 网页正文部分上: window.screenTop 网页正文部分左: window.screenLeft 屏幕分辨率高: window.screen.height...HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象滚动高度。...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...event.offsetX 相对容器水平坐标 event.offsetY 相对容器垂直坐标 document.documentElement.scrollTop 垂直方向滚动值 event.clientX...+document.documentElement.scrollTop 相对文档水平座标+垂直方向滚动量 < !

    7.6K80

    javascript 获取多种主流浏览器显示页面高度(转)

    ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox: document.body.clientWidth ==>...window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离  scrollWidth:获取对象滚动宽度...event.offsetX 相对容器水平坐标  event.offsetY 相对容器垂直坐标  document.documentElement.scrollTop 垂直方向滚动值  event.clientX...+document.documentElement.scrollTop 相对文档水平座标+垂直方向滚动量 实现代码 1 < !

    96220

    JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

    ==> 页面对象高度(即BODY对象高度加上Margin高) scrollHeight: 获取对象滚动高度。...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...相对容器水平坐标 event.offsetY 相对容器垂直坐标 document.documentElement.scrollTop 垂直方向滚动值 event.clientX+document.documentElement.scrollTop...相对文档水平座标+垂直方向滚动量 以上主要指IE之中,FireFox差异如下: IE6.0、FF1.06+: clientWidth = width + padding clientHeight...,clientTop: 这两个返回是元素周围边框厚度,如果不指定一个边框或者不定位改元素,他值就是0. 3.scrollLeft,scrollTop: 如果元素是可以滚动,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远

    7.1K20

    offsetWidth,clientWidth区别

    偏移量 offsetWidth 元素在水平方向上占用空间大小 包括元素宽度、可见垂直滚动条宽度、左边框高度和右边框高度...offsetWidth=width+padding+border offsetHeight 元素在垂直方向上占用空间大小 包括元素高度、可见水平滚动条宽度、上边框高度和下边框高度...+padding 对象滚动宽度和高度 scrollWidth,scrollHeight (对象实际内容宽度,不包边线宽度) 对象左侧和顶部滚动距离 scrollLeft...,scrollTop 滚动大小 scrollWidth:没有滚动情况下,元素内容总宽度; scrollHeight:没有滚动情况下,元素内容高度; scrollLeft...网页被卷去左: document.body.scrollLeft; 网页正文部分上: window.screenTop; 网页正文部分左: window.screenLeft; 屏幕分辨率

    68220

    Js窗体window大小设置(转)

    网页被卷去高:document.body.scrollTop  网页被卷去左:document.body.scrollLeft  网页正文部分上:window.screenTop  网页正文部分左...window.screen.availWidth  HTML精确定位: scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离  scrollWidth:获取对象滚动宽度...event.offsetX 相对容器水平坐标  event.offsetY 相对容器垂直坐标  document.documentElement.scrollTop 垂直方向滚动值  event.clientX...+document.documentElement.scrollTop 相对文档水平座标+垂直方向滚动量 IE,FireFox 差异如下:  IE6.0、FF1.06+:  clientWidth

    6.1K20

    JS常用代码块

    网页被卷去高:document.body.scrollTop 网页被卷去左:document.body.scrollLeft 网页正文部分上:window.screenTop 网页正文部分左...window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...event.offsetX 相对容器水平坐标 event.offsetY 相对容器垂直坐标 document.documentElement.scrollTop 垂直方向滚动值 event.clientX...+document.documentElement.scrollTop 相对文档水平座标+垂直方向滚动量 4. js获取对象字符串,截取所需位数内容 var data = $('a').text

    3.2K31

    HTML、CSS、JavaScript学习总结

    通过设置width属性和height属性可以控制图像显示宽度和高度,他们长度单位可是百分比,也可是像素。...关键字在垂直方向主要有top、center、bottom,表示顶端、居中和底端。其中水平方向和垂直方向关键字可相互搭配使用。...长度单位可以使用绝对单位也可使用相对单位,px、pt、cm等。 Ø 基本语法边框宽度属性border-width是一个复合属性,可以同时设置四条边框宽度。...• Ø auto表示自动设置长度。 • Ø 长度包括长度值和单位。 • Ø 长度也可使用相对值百分比。 • 对于每个层在设置层大小时,其中只能设置宽度和高度一个值,另一个值则自动获得。...”用在为访问链接上 • “:hover”用于鼠标光标置于其上链接 • “:active”用于获得焦点(“被单击”)链接上 • “:visited”用在已经访问过链接上 • 盒子在标准流定位原则

    3.1K20

    marquee 标签参数详细说明

    direction: 设置文本滚动方向。属性值有4种: left - 从右向左。默认值。 right - 从左向右。 up - 向上。 down - 向下。 loop: 设置滚动次数。...scrollamount: 设置每次滚动时移动长度(以像素为单位),也就是滚动速度。默认值为6 。 值越大,滚动速度越快,一般5-10比较适合查看消息。...scrolldelay: 设置每次滚动时间间隔(以毫秒为单位)。默认值为 85。 值越大,滚动速度越慢,通常不设置。...bgcolor: 通过颜色名称或十六进制值设置背景颜色。 vspace:以像素或百分比设置垂直边距。 width:以像素或百分比设置宽度。 height:以像素或百分比设置高度。...onfinish:当 marquee 完成 loop 属性设置值时触发。它只能在 loop 属性设置为大于 0 某个数字时触发。 onstart:当 marquee 开始滚动时触发。

    2.3K10

    CSS 尺寸单位概述

    零宽单位: ch 和 rch ch 和 rch 单位基于用于渲染字体零字形宽度或高度进行度量。当文档内联轴为水平轴时,计算基于其宽度。如果内联轴是垂直,则根据零字形高度进行计算。...另一方面,大写高度是指从基线到大写字母顶部距离,通常是指顶部平坦字母高度。在某些字体,尖顶或圆形大写字母( A、O 和 S)顶端高度可能会稍高一些。...升角是小写字母( h 或 b)超出 x 高度部分。 表意单位:ic和ric ic 单单位最适用于中文、日文和韩文字符集。它根据所使用字体"水 "或"水形表意文字"来计算长度。...本地行高或 lh 单位继承了祖先元素行高值。 当项目使用多种字体和/或语言时,ex、cap、ic 和 lh 等单位尤其有用。即使用户更改了字体设置,也能保持垂直和大小比例。...这与百分比不同,百分比将尺寸设置为父元素宽度或高度一定比例。

    32410

    clientWidth、offsetWidth等介绍

    window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...event.offsetX 相对容器水平坐标 event.offsetY 相对容器垂直坐标 document.documentElement.scrollTop 垂直方向滚动值 event.clientX...+document.documentElement.scrollTop 相对文档水平座标+垂直方向滚动量 IE,FireFox 差异如下: IE6.0、FF1.06+: clientWidth =...= width – border clientHeight = height – border offsetWidth = width offsetHeight = height (需要提一下:CSS

    61120

    js 获取屏幕各种宽高方法(浏览器兼容)

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象滚动高度。 ...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离  scrollWidth:获取对象滚动宽度...event.offsetX 相对容器水平坐标  event.offsetY 相对容器垂直坐标  document.documentElement.scrollTop 垂直方向滚动值  event.clientX...+document.documentElement.scrollTop 相对文档水平座标+垂直方向滚动量 IE,FireFox 差异如下: IE6.0、FF1.06+: clientWidth =...= width - border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下:CSS

    3.5K100

    移动端H5知识 - fixed定位模式与其他

    比较合适解决办法就是,不要为body标签设置三维变形模式,如果需要针对元素运用三维变形,在相应父级上设置三维变形模式即可。 fixed定位应用——让一个元素高度宽度自适应,占满整个屏幕。...在做移动端过程,我曾经尝试过百分比做法,那时候为了让一个文字在父级垂直居中,必然要用到line-height。...于是给其line-height设置百分比,但是发现line-height并非是按照父级高度进行设置,它也不是根据父级宽度设置。...后来经过测试,发现,line-height如果设置百分比,那么基于是这个元素字体大小,在这个字体大小基础上乘以百分比,就是line-height值。...网络字体相关知识 随着网页发展,网页中出现了越来越多字体种类,原有的微软雅黑以及宋体早就无法满足设计需要,那么,如何在网站中使用比较特殊字体(“华文行楷”)来装饰我们网站部分呢?

    1.5K50
    领券