返回顶部的功能 div固定在页面位置不变
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固定在页面位置不变的更多相关文章
- 结合setTimeout和clearTimeout,实现“返回顶部”的功能
结合setTimeout和clearTimeout,当页面停止滚动时,“返回顶部”按钮淡隐淡出.点击“返回顶部”页面以动画形式返回顶部.完美兼容ie6-11,firefox,chrome等. html ...
- 控制div固定在页面的某个位置 ,用js感觉很麻烦 CSS更好一些
CSS代码:<style type="text/css"> html,body { width:100%; height:100%; margin:0px; paddi ...
- 【微信小程序】实现类似WEB端【返回顶部】功能
1.原理:利用小程序自带的<scroll-view>组件,该组件的bindScroll和scroll-top方法.属性进行联合操作 2.效果图: 3.wxml: <scroll-vi ...
- js把div固定在页面的右下角
在公司做材料系统中,需要做一个总是居于右下角的div,但是因为右边这部分本就是用iframe做的,所以是不好弄的. 一开始,以为用position:fixed,一句css就可以完成,结果在iframe ...
- DIV固定在页面某个位置,不随鼠标滚动而滚动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...
- div产生的滚动条返回顶部
div产生的滚动条返回顶部 1.获取div js: let initialNode = document.getElementById("content") react: let ...
- 写一个JavaScript“返回顶部”功能
在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 效果演示可以查看本页.如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条.点击这里“ ...
- 【Android】Listview返回顶部,快速返回顶部的功能实现,详解代码。
作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...
随机推荐
- 可爱的豆子——使用Beans思想让Python代码更易维护
title: 可爱的豆子--使用Beans思想让Python代码更易维护 toc: false comments: true date: 2016-06-19 21:43:33 tags: [Pyth ...
- 分治法求解最近对问题(c++)
#include"stdafx.h" #include<iostream> #include<cmath> #define TRUE 1 #define F ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- 微信小程序(微信应用号)组件讲解
这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...
- jquery-treegrid树状表格的使用(.Net平台)
上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...
- 虚拟机VMware12.05下安装Ubuntu16.04几个关键地方
在踩了自己按照网上的教程安装Ubuntu之后,仍然踩了不少坑,鼓捣了一段时间,才达到自己想要的界面. 下面就来说说,大家可能也会遇到的情况: 1.安装ISO镜像时候,路径直接选择 你从Ubun ...
- Princeton Algorithms week3 Assignment
这周编程作业是实现检测点共线的算法.和排序算法有关系的地方在于,对斜率排序后可以很快的检测出来哪些点是共线的,另外这个算法的瓶颈也在于排序的性能. 一点收获: java传参数时传递的是值,这很多人都知 ...
- 【流量劫持】SSLStrip 终极版 —— location 瞒天过海
前言 之前介绍了 HTTPS 前端劫持 的方案,虽然很有趣,然而现实却并不理想.其唯一.也是最大的缺陷,就是无法阻止脚本跳转.若是没有这个缺陷,那就非常完美了 -- 当然也就没有必要写这篇文章了. 说 ...
- Vue.js——vue-resource全攻略
概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...
- 最新Angular2案例rebirth开源
在过去的几年时间里,Angular1.x显然是非常成功的.但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应.这些问题包括性能瓶颈.滞后于极速发展的Web标准.移动化多平台应用, ...