回到顶部
<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. Java If ... Else

    章节 Java 基础 Java 简介 Java 环境搭建 Java 基本语法 Java 注释 Java 变量 Java 数据类型 Java 字符串 Java 类型转换 Java 运算符 Java 字符 ...

  2. SVPWM总结

    空间矢量算法 是以逆变器和电机作为一个整体来研究的.目标是产生电机定子的圆形磁场 模态选择, 上管导通 状态为1 下管导通 状态为0 那么状态为000 001 010 011 100 101 110 ...

  3. wireshark混杂模式

    来自:https://blog.csdn.net/mukami0621/article/details/78645825 通过设置网卡为混杂模式就能捕获局域网内所有发包内容,包括非广播包和非发给自己主 ...

  4. Web系统测试的常用方法总结-18《转载》

    Web系统测试的常用方法归纳 --- 知识记录 1.页面链接检查 每一个链接是否都有对应的页面,并且页面之间切换正确.可以依靠一些工具,如:LinkBotPro.File-AIDCS.HTML Lin ...

  5. ExcelPackage导入导出,命名空间一定要是EPPlus

    1.引入EPPlus.dll,旧版的是OfficeOpenXml.dll,最好使用EPPlus2.调用 string path = UploadExecl(batchUpload.BinaryExce ...

  6. java流程控制语句要点

    java流程控制语句要点 一.java7增强后的switch switch语句后面的控制表达式的数据类型只能是byte.short.char.int四种整数类型,不能是boolean类型,java7以 ...

  7. Java中如何序列化一个对象(转)

    转自:http://blog.csdn.net/chx10051413/article/details/40784667 http://www.cnblogs.com/baoendemao/p/380 ...

  8. Windows + Python + flup + flask + fastcgi + Nginx配置

    Nginx配置 # HTTPS server { listen ssl; server_name kvaccount.xx.io; ssl_certificate "C:/xx/conf/s ...

  9. webpack散记---代码分割 和 懒加载

    webpack methods ES 2015 Loader spec (1)webpack methods方法 require.ensure //可以动态加载依赖 []:dependencies / ...

  10. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...