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">// <![CDATA[
var MarginLeft = 10; //浮动层离浏览器右侧的距离
var MarginTop = document.body.clientHeight - 80; //浮动层离浏览器顶部的距离(浏览器高度-div高度)
var Width = 25; //浮动层宽度
var Heigth= 80; //浮动层高度 //设置浮动层宽、高
function Set()
{
document.getElementById("FloatDIV").style.width = Width + 'px';
document.getElementById("FloatDIV").style.height = Heigth + 'px';
} //实时设置浮动层的位置
function Move()
{
var b_top = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
var b_width= document.body.clientWidth;
document.getElementById("FloatDIV").style.top = b_top + MarginTop + 'px';
document.getElementById("FloatDIV").style.left = b_width - Width - MarginLeft + 'px';
setTimeout("Move();",100);
} Set();
Move();
// ]]></script>
参考:博客园
HTML 回到顶部 浮动的更多相关文章
- web页面浮动回到顶部功能和浮动广告
实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...
- 浮动【电梯】或【回到顶部】小插件:iElevator.js
iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
- 【JQ+锚标记实现点击页面回到顶部】
前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...
- iOS点击状态栏回到顶部底层实现原理
在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...
- 【JavaScript Demo】回到顶部功能实现
随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...
- iOS tableView 滚动后回到顶部
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint contentOffsetPoint = self.tableView ...
- 页面上常用的一些小功能--QQ、回到顶部
1.QQ <script charset="utf-8" type="text/javascript" src="http://wpa.b.qq ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- spark aggregate算子
spark aggregate源代码 /** * Aggregate the elements of each partition, and then the results for all the ...
- JuJu团队12月4号工作汇报
JuJu团队12月4号工作汇报 JuJu Scrum 团队成员 今日工作 剩余任务 困难 于达 调试 无 无 婷婷 和陈灿一起提升acc 无 无 恩升 纠正chunk evaluator 无 无 ...
- IDEA启动Tomcat报错Address localhost:1099 is already in use解决办法
问题:Error running 'lugia-web': Address loaclhost:1099 is already in use如下图 解决方法:cmd输入下面命令: netstat -a ...
- SQL注入汇总(手注,盲注,报错注入,宽字节,二次编码,http头部){10.22、23 第二十四 二十五天}
首先什么是SQL注入: 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. SQL注入有什么危害? 危害:数据泄露.脱库 ...
- python学习笔记2018-9-18
1.可选参数传递 此处m=1并不是写定m必为1,而是m为可选参数,当不对其进行赋值时,其默认值为1. 2.函数的返回值 return可以传递0个返回值,也可以传递任意多个返回值 3.局部变量与全局变量 ...
- Ubuntu不会放弃32位应用程序
Ubuntu 开发人员澄清,人们以为 Ubuntu 将在 Ubuntu 19.10 和后续版本中放弃对运行 32 位应用程序的支持,但“根本不是这种情况”.那么这究竟是怎么一回事呢?前几天 Ubunt ...
- 51nod 1352:集合计数
1352 集合计数 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 收藏 关注 给出N个固定集合{1,N},{2,N-1},{3,N-2},...,{N-1,2 ...
- FULLTEXT INDEX全文索引
给现有的wxinfo表的sourceUrl 字段创建全文索引 ALTER TABLE wxinfo ADD FULLTEXT INDEX sourceUrl (sourceUrl) 创建全文索引前: ...
- 091-PHP数组过滤函数array_filter,过滤非整数
<?php function not_int($x){ //定义过滤非整数的函数 if(is_int($x)) return TRUE; } $arr=array(1,2,'a',3,4,'c' ...
- 干货分享:常见的留学生Essay写作逻辑结构
任何一种类型的Essay写作都应遵循一种逻辑结构,Long Essay可能在不同部分依据情况使用不同的逻辑结构.本文将为大家分享六种常见留学生Essay写作逻辑结构,为方便阅读本文采用中英文对照方式. ...