[BUG]document.body.scrollTop=0不生效（回到顶部）

描述让body回滚到最顶部,设置 document.body.scrollTop = 0; . 微信内,安卓设备可以,ios设备不可以. 原因 MDN中 scrollTop是这样定义的一个元素的 scrollTop 值是这个元素的顶部到视口可见内容(的顶部)的距离的度量.当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0. 简单来说,scrollTop是这个元素的内容相对于自己向上滚动的高度. ios设备中没问题,但是安卓设备 body 比较特殊,即使body…

HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现

对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousemove=function(event){ event.clientX;//鼠标X坐标 event.clientY;//鼠标Y坐标对象.style.left=event.clientX - 对象.offsetWidth/2 + "px"; 对象.style.top=event.client…

火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

一.先遇到document.body.scrollTop值为0的问题做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.onscroll=function () { var oId=document.getElementByIdx_x("id"); oId.style.top=document.body.scrollTop+"px"; } 可是怎么没有达到预期效果呢,输出document.b…

document.body.scrollTop 值总为0

http://www.jb51.net/article/21168.htm 页面具有 DTD(或者说指定了 DOCTYPE)时,使用 document.documentElement. 做页面的时候可能会用到位置固定的层,读取 document.body.scrollTop 来设置层的位置,像这样: window.onscroll = function (){ var oFix = document.getElementById("divfix"); oFix.style.t…

document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

转自http://wo13145219.iteye.com/blog/2001598 一.先遇到document.body.scrollTop值为0的问题做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.onscroll=function () { var oId=document.getElementByIdx_x("id"); oId.style.top=document.body.scrollTop+&…

document.body.scrollTop无效的解决方法

1.document.body.scrollTop = 0 有时候不生效,两种解决方案,试试看. 1-1.设置:document.documentElement.scrollTop = 0;1-2.设置:window.scrollTo(0, 0);…

document.body.scrollTop 各浏览器兼容性解决

document.compatMode:获取当前浏览器采用的渲染方式.主要是浏览器的模式,有两个:BackCompat,CSS1Compat.其中前者是怪异模式,后者是标准模式. IE默认是BackCompat模式,Gecko内核的浏览器只在table中图片层上不同,可以认为CSS1Compat标准模式document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth: 当document.compatMode等于CSS1Co…

UEditor图片焦点错位,火狐document.body.scrollTop不管用的问题

转自 http://liyunpeng.iteye.com/blog/2068751 关于 document.body.scrollTop 在火狐浏览器中不管用的问题看网上有人写通过判断document.compatMode来分别不同的模式,然后使用如下语句 document.documentElement.scrollTop或者 document.body.scrollTop 但是,我在本地的环境试了一下发现 Chrome和Firefox都“ CSS1Compat”这种模式,但是解析的结果…

document.documentElement.scrollTop

要获取当前页面的滚动条纵坐标位置, 用: document.documentElement.scrollTop; 而不是: document.body.scrollTop; documentElement 对应的是 html 标签,而 body 对应的是 body 标签. 在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替如果你想定位鼠标相对于页面的绝对位置时,你会发现…

document.documentElement.scrollTop指定位置失效解决办法

近期在vue的H5项目中,做指定位置定位的时候发现使用document.documentElement.scrollTop一直不生效. 解决办法是document.documentElement.scrollTop改成document.body.scrollTop: 如果是PC端项目,则使用document.documentElement.scrollTop.…

【JavaScript Demo】回到顶部功能实现

随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布局 (1) 我们先简单的搭建一个长度为1200px的页面,保证视口的高度足够. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta…

回到顶部js代码

function go_to_top(){ //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数) window.scrollBy(0,-10); //延时递归调用,模拟滚动向上效果 scrolldelay = setTimeout('go_to_top()',5); //获取scrollTop值,声明了DTD的标准网页取document.documentElement.scrollTop,否则取document.body.scrollTop:因为二者只有一个会…

dom 回到顶部(兼容IE FF Chrome)

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #wrap{ height:2000px; background:pink; position:relative; } #ontop{ position:absolute; bottom:0px; right:0px; background:…

web页面浮动回到顶部功能和浮动广告

实现测试浮动回到顶部法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BackToTopTwo.aspx.cs" Inherits="PracticeCollectionTwo.BackToTopTwo" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti…

纯javascript 回到顶部实例

很多网站都会采用瀑布式的加载模式,像qq空间加载好友动态,为了用户体验更好,很多网站会加上回到顶部的连接,但大多数网站都是一下子就回到了顶部,当然,这样有这样的好处,但是我是个比较喜欢很炫的东西的人,所以就比较喜欢滑动滚到顶上.直接上代码吧. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <…

octopress添加回到顶部按钮

准备回到顶部的png图片一枚,可以随自己喜好google.分享我的取名top.png,保存在octopress/source/images/top.png octopress/source/_includes/custom/目录下新建网页文件:totop.html  <div id="full" style="width:0px; height:0px; position:fixed; right:80px; bottom:80p…

js回到顶部------转载

[1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 1 2 3 4 <body style="height:2000px;"> <div id="topAnchor"></div> <a href="#topAnchor" st…

vue 回到顶部的小问题

今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏因为可能会有其他的组件会用到这样的逻辑,所以将此功能做成一个自定义指令: 根据滚动的距离控制一个数据为true还是为false(v-scroll-show) 问题: 唯一需要注意的是,在指令的钩子函数中我们可以访问到el,也就是使用指令的标签,但是我们不能直接更改value(指令的值所代表的数据) 所以我们使用引用类型来进行地址的传递来解决这个问题…

jacascript 滚动 scroll 与回到顶部

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 滚动 scroll scrollHeight 表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分: scrollWidth 表示元素的总宽度,包括由于溢出而无法展示在网页的不可见部分: 没有滚动条时,scroll 和 client 属性的结果相等,即 scrollWidth= padding + width: scrollHeight= padding + height: 存在滚动条时,但元素设…

js效果之回到顶部

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> .up { display: none; width: 100px; height: 100px; background: red; position: fixed; right: 10px; bottom: 20px; }…

用原生JavaScript做个简单的回到顶部

很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美).随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在,于是我也跟跟风,将返回顶部功能做成了滑动效果.后来为了更贴合物理特征, 改造做成了减速的滑动效果. 首先说一下原理吧,我们会获取滚动条到页面顶部的距离,然后上移一定的距离:再获取滚动条到页面顶部的距离,上移一定的距离(比上一次小一点);以此类推 ... 先上代码吧: view source p…

js悬浮、回到顶部

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

vue路由切换时内容组件的滚动条回到顶部

在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }) 2.当页面中的其中一个组件中需要滚动到顶部的时候 watch: { $route(to) { //监听路由变化的时候使滚动条回到顶部 this.$refs.c…

js实现回到顶部功能

js实现回到顶部功能一.总结一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(top){ if (document.compatMode == "BackCompat") { document.body.scrollTop = top; } else { if(document.documentElement.scrollTop == 0){ document.bod…

HTML 回到顶部浮动

回到顶部 <div id="FloatDIV" style="position: absolute; top: 0px; z-index: 9999; background: #fff000; cursor: pointer;" onclick="window.scrollTo(0,0);">回到顶部</div> <script type="text/javascript">// <!…

angularjs 路由切换回到顶部

angularjs路由切换页面不会回到顶部问题: 在angularjs中 ui-sref或者$state.go(),通过路由切换页面,发现新打开的路由页面仍然停留在上一次的路由页面访问的位置. 解决方式: 通过网上搜索,发现有通过 autoscroll="true"实现的,确实这项配置可以使得新打开的路由页面回到当前路由块的顶部,而不会满足我回到网页的顶部.如果在开发过程中遇到这种切换路由回到网页顶部或者其他位置的情况该怎么解决呢? 最终通过路由变化监控实现如下: artAp…

页面回到顶部的三种实现(锚标记，js)

一.使用锚标记返回页面顶部使用HTML锚标记最简单,就是看起来有点不好看,点击后会在地址栏显示这个锚标记,其它的倒没什么. 页面顶部放置: <a name="top" id="top"></a> 放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可. 页面底部放置: <a href="#top" target="_self">返回顶部</a> 二.使…

移动端Vue回到顶部

html: <div class="totop" id="totop" @click="Top" v-show="totop"> <i class="iconfont icon-zhiding"></i> </div> css: .totop{ position: fixed; width: 2.5rem ;/* 40/16 */ height: 2.5rem…

input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化前端必知的ajax 简单理解同步与异步那些年，我们被耍过的bug——has

input屏蔽历史记录设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.extend($.fn...现般在一些 JQuery 函数前面有分号,在前面加分号可以有多种用途:1.防止多文件集成成一个文件后,高压缩出现语法错误.2.这是一个匿名函数,一般js库都采用这种自执行的匿名函数来保护内部变量 (function(){})().3.因为undefined是window的属性…

document.body.scrollTop值为0的解决方法[转]

做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.onscroll=function () { var oId=document.getElementByIdx_x("id"); oId.style.top=document.body.scrollTop+"px"; } 可是怎么没有达到预期效果呢,输出document.body…

【[BUG]document.body.scrollTop=0不生效（回到顶部）】的更多相关文章