回到顶部
<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 回到顶部 浮动的更多相关文章

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

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  2. 浮动【电梯】或【回到顶部】小插件:iElevator.js

    iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...

  3. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  4. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

  5. iOS点击状态栏回到顶部底层实现原理

    在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...

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

    随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...

  7. iOS tableView 滚动后回到顶部

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint contentOffsetPoint = self.tableView ...

  8. 页面上常用的一些小功能--QQ、回到顶部

    1.QQ <script charset="utf-8" type="text/javascript" src="http://wpa.b.qq ...

  9. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. P1045 快速排序

    P1045 快速排序 转跳点:

  2. OPENCV2.46 与2.4.10以上版本的区别

    本人系统环境: CPU:Intel(R)Core(TM) i3-4160 CPU @ 3.60GHz 内存:4G 接两路摄像机,一路海康,一路艾普视达.CPU占有率95%.发现opencv2.4.10 ...

  3. DFS(深度优先搜索遍历求合格条件总数)--07--DFS--蓝桥杯方格填数

    此题方法多种,我用规范的DFS来求解 题目:方格填数 如下的10个格子,填入0~9的数字.要求:连续的两个数字不能相邻. (左右.上下.对角都算相邻)一共有多少种可能的填数方案?   输出 请填写表示 ...

  4. 三、JavaScript之隐藏HTML元素

    一.代码如下 二.点击前效果 三.点击后效果 <!DOCTYPE html> <html> <meta http-equiv="Content-Type&quo ...

  5. PHP数组创建和遍历(基础)

    数组定义PHP数组可以是混合数组 你的数组里面可以有数字也可以有字符串,二维数组不谈一个数组里还有数组跟C有差别定义方式例如 $dd=array(array(1,2,3),array(1,2,3,4) ...

  6. PHP笔记01

    php 环境 xamp wamp phpstudy等集成软件网上很多 PHP基础语法 PHP语法是以<?php开始 ?>结束的//php 文件的默认扩展名是.php 例如(用PHP输出he ...

  7. Bean 注解(Annotation)配置(2)- Bean作用域与生命周期回调方法配置

    Spring 系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of ...

  8. mysql安装--window版

    一.下载 二.解压 三.配置 四.环境变量 五.安装MySQL服务 六.启动MySQL服务 七.停止MySQL 一.下载 第一步:打开网址,https://www.mysql.com,点击downlo ...

  9. CCCC L2-004. 这是二叉搜索树吗?

    题意: 一棵二叉搜索树可被递归地定义为具有下列性质的二叉树:对于任一结点, 其左子树中所有结点的键值小于该结点的键值: 其右子树中所有结点的键值大于等于该结点的键值: 其左右子树都是二叉搜索树. 所谓 ...

  10. Ubuntu 14.04 搭建 ftp

    一.安装ftp服务器vsftpd $sudo apt-get update $sudo apt-get install vsftpd ftp服务器使用21端口,安装成功之后查看是否打开21端口 $ s ...