后视镜加热按键图标_js点击按钮弹出图片

后视镜加热按键图标_js点击按钮弹出图片如何给自己的网站添加方便快捷的“返回顶部”小图标按钮呢?如下图:JS源代码:/***JavaScript脚本实现回到页面顶部示例*@paramacceleration速度*@paramstime时间间隔(毫秒)**/functiongotoTop(acceleration,stime){acceleration=acceleration||0.1…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

如何给自己的网站添加方便快捷的“返回顶部”小图标按钮呢?如下图:

459962-20161108201731889-366136735.png

JS源代码:

/**
* JavaScript脚本实现回到页面顶部示例
* @param acceleration 速度
* @param stime 时间间隔 (毫秒)
**/
function gotoTop(acceleration,stime) {
   acceleration = acceleration || 0.1;
   stime = stime || 10;
   var x1 = 0;
   var y1 = 0;
   var x2 = 0;
   var y2 = 0;
   var x3 = 0;
   var y3 = 0; 
   if (document.documentElement) {
       x1 = document.documentElement.scrollLeft || 0;
       y1 = document.documentElement.scrollTop || 0;
   }
   if (document.body) {
       x2 = document.body.scrollLeft || 0;
       y2 = document.body.scrollTop || 0;
   }
   var x3 = window.scrollX || 0;
   var y3 = window.scrollY || 0;
 
   // 滚动条到页面顶部的水平距离
   var x = Math.max(x1, Math.max(x2, x3));
   // 滚动条到页面顶部的垂直距离
   var y = Math.max(y1, Math.max(y2, y3));
 
   // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
   var speeding = 1 + acceleration;
   window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
 
   // 如果距离不为零, 继续调用函数
   if(x > 0 || y > 0) {
       var run = "gotoTop(" + acceleration + ", " + stime + ")";
       window.setTimeout(run, stime);
   }
}

HTML源代码:

<div onClick="gotoTop();return false;" style="position:fixed;right:10px;bottom:15%;"><img src="http://images.cnblogs.com/cnblogs_com/wangduo/882494/o_top.png" width=36px;height=36px></div>

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

就是这么简单,就是这么任性!个性十足的你,赶快去试试吧!

代码有不理解的地方可以通过留言与博主交流!

转载于:https://www.cnblogs.com/wangduo/p/6044435.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185339.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 2048游戏逻辑

    2048游戏逻辑

  • java中数组初始化方法_java数组初始化赋值

    java中数组初始化方法_java数组初始化赋值java中初始化数组的方式有几种发布时间:2020-06-0116:12:45来源:亿速云阅读:153作者:鸽子三种初始化方式:1、静态初始化:创建+赋值2、动态初始化:先创建再赋值3、默认初始化:创建之后若不赋值则会被赋对应数据类型的默认值我们来看一下具体代码:publicclassTest3{publicstaticvoidmain(String[]args){//1、声明…

    2022年10月19日
  • QQ群关系数据库处理

    QQ群关系数据库处理1.附加数据库1EXECsp_attach_single_file_db@dbname='GroupData1_Data',@physname='/media/

  • setfacl解释「建议收藏」

    setfacl解释「建议收藏」setfacl:设置文件访问控制列表,针对单独文件,设置单独用户权限用法:setfacl-参数用户权限文件参数:-m,–modify=acl更改文件的访问控制列表-M,–modify-file=file从文件读取访问控制列表条目更改-x,–remove=acl根据文件中访问控制列表移除条目-X,–remove-file=file从文件读取访问控制列表条目…

  • 微软OneDrive云盘5T大容量免费申请「建议收藏」

    微软OneDrive云盘5T大容量免费申请「建议收藏」博主分享一个亲测有效的OneDrive获取5T的方法,OneDrive云盘在国内的下载速度还是相当可以的,5T的大空间相信也能满足绝大部分人,教育版的子账号还是很稳的,欢迎上车,但是本人不提供任何技术支持,有需要还是请百度吧,因为我也没有搞得很明白。自助申请教程获取临时邮箱打开:http://mail.hrka.net/,获取临时邮箱地址,打开后复制右上角邮箱地址,不要关闭或刷…

  • StrictMode总结「建议收藏」

    StrictMode总结「建议收藏」Android2.3提供一个称为严苛模式(StrictMode)的调试特性,Google称该特性已经使数百个Android上的Google应用程序受益。首先先整体介绍:StrictMode.setThreadPolicy(newStrictMode.ThreadPolicy.Builder()//线程策略(ThreadPolicy).det

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号