1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0;

但是这个在iframe满地跑的页面实际开发中,有啥用呢?反正我用了感觉没啥用。

2.还有一种就是JS控制了。我写的是随着滚动滚动 ,计算div的绝对与可视页面的位置不变。

$(window.parent).on('scroll',function(){
$(返回顶部所在div选择器).css('top',parent.document.documentElement.scrollTop+parent.document.body.scrollTop+'px');
})//这是在iframe框架中控制父body $(window).on('scroll',function(){
$(返回顶部所在div选择器).css('top',document.documentElement.scrollTop+document.body.scrollTop+'px');
})//这是在没有iframe框架中控制body

3.这里有这两个东西:

parent.document.documentElement.scrollTop//IE 
parent.document.body.scrollTop//谷歌
这是为了考虑兼容性

返回顶部的功能 div固定在页面位置不变的更多相关文章

  1. 结合setTimeout和clearTimeout,实现“返回顶部”的功能

    结合setTimeout和clearTimeout,当页面停止滚动时,“返回顶部”按钮淡隐淡出.点击“返回顶部”页面以动画形式返回顶部.完美兼容ie6-11,firefox,chrome等. html ...

  2. 控制div固定在页面的某个位置 ,用js感觉很麻烦 CSS更好一些

    CSS代码:<style type="text/css"> html,body { width:100%; height:100%; margin:0px; paddi ...

  3. 【微信小程序】实现类似WEB端【返回顶部】功能

    1.原理:利用小程序自带的<scroll-view>组件,该组件的bindScroll和scroll-top方法.属性进行联合操作 2.效果图: 3.wxml: <scroll-vi ...

  4. js把div固定在页面的右下角

    在公司做材料系统中,需要做一个总是居于右下角的div,但是因为右边这部分本就是用iframe做的,所以是不好弄的. 一开始,以为用position:fixed,一句css就可以完成,结果在iframe ...

  5. DIV固定在页面某个位置,不随鼠标滚动而滚动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...

  6. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  7. div产生的滚动条返回顶部

    div产生的滚动条返回顶部 1.获取div js: let initialNode = document.getElementById("content") react: let ...

  8. 写一个JavaScript“返回顶部”功能

    在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 效果演示可以查看本页.如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条.点击这里“ ...

  9. 【Android】Listview返回顶部,快速返回顶部的功能实现,详解代码。

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...

随机推荐

  1. ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  2. 两个 viewports 的故事-第二部分

    原文链接:A tale of two viewports — part two 译者:nzbin 在这个迷你系列中,我将解释 viewports 和各种重要元素的宽度是如何工作的,比如说 <ht ...

  3. Java中Comparable与Comparator的区别

    相同 Comparable和Comparator都是用来实现对象的比较.排序 要想对象比较.排序,都需要实现Comparable或Comparator接口 Comparable和Comparator都 ...

  4. 设置tomcat远程debug

    查看端口占用情况命令: netstat -tunlp |grep 8000 tomcat 启动远程debug: startup.sh 中的最后一行 exec "$PRGDIR"/& ...

  5. 你所能用到的BMP格式介绍

    原理篇: 一.编码的意义. 让我们从一个简单的问题开始,-2&-255(中间的操作符表示and的意思)的结果是多少,这个很简单的问题,但是能够写出解答过程的人并不 多.这个看起来和图片格式没有 ...

  6. QT内省机制、自定义Model、数据库

    本文将介绍自定义Model过程中数据库数据源的获取方法,我使用过以下三种方式获取数据库数据源: 创建 存储对应数据库所有字段的 结构体,将结构体置于容器中返回,然后根据索引值(QModelIndex) ...

  7. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

  8. Vue.js——60分钟组件快速入门(下篇)

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

  9. iOS开发系列--Swift进阶

    概述 上一篇文章<iOS开发系列--Swift语言>中对Swift的语法特点以及它和C.ObjC等其他语言的用法区别进行了介绍.当然,这只是Swift的入门基础,但是仅仅了解这些对于使用S ...

  10. ValueInjecter----最好用的OOM(以微信消息转对象举例)

    使用数据实体的好处我这里就不多说了,但大家享受这些好处的时候,难免也对那些琐碎的赋值代码感到厌烦,基于此,我认为掌握一个oom的使用,还是很有必要的. 这种类型的工具有很多,比如automapper, ...