`
yanyanquan
  • 浏览: 442026 次
  • 性别: Icon_minigender_1
  • 来自: 江门
社区版块
存档分类
最新评论

关于‘TOP’置顶链接

    博客分类:
  • W3C
 
阅读更多

 

方案一:在合适的地方,手动加入一个或多个‘TOP’链接。

 

这是最原始的做法了,如果滚动太快,验,那就是我们给用户用脚本实现一下缓冲效果,而不是直接飙到顶部。

 

<a id="gototop" href="javascript:void(0);" onclick="goTop();return false;">Top of Page</a>

 

 

function goTop(acceleration, time) {

 acceleration = acceleration || 0.1;

 time = time || 16;

 

 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 speed = 1 + acceleration;

 window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

 

 // 如果距离不为零, 继续调用迭代本函数

 if(x > 0 || y > 0) {

  var invokeFunction = "goTop(" + acceleration + ", " + time + ")";

  window.setTimeout(invokeFunction, time);

 }

}

 

 

方法2:

 <a href="#top" id="gototop" >Top of Page</a>


分享到:
评论

相关推荐

    R.E浏览器​​​​​​​.apk

    R.E浏览器​​​​​​​.apk root explorer,root文件浏览器,可改系统文件属性的,推荐

    WordPress酱茄开源小程序-免费小蓝主题2.6.4最新版 微信小程序(已实测)

    【优化】优化首页弹窗广告显示位置top-19%屏幕 【美化】美化顶部导航分类查看状态特显效果,更凸出 【美化】美化文章页底部评论栏增加个性化ico图标效果并调节对宽比 四、小蓝主题特点 1.全局道奇蓝主题色调,更...

    (已更新)WordPress酱茄开源小程序-免费小蓝主题2.6.4最新版 微信小程序

    、版本更新优化内容 版本:2.6.4 一、更新日期:2021.4.30 【修复】修复热榜顶部无图滑动显示透明问题 【修复】修复热榜无内容提示内容位置显示过高异常问题 【恢复】恢复文章页内容头部圆角...8.支持独立友情链接

    多多校园论坛,很经典很强大

    (2)关于会员与管理后台安全说明: 1 管理后台用独立帐号,使用session验证,用户密码为md5加密,建议用大小写英文+数字组成的密码基本上无法破解; 2 会员使用安全的cookies验证,本程序只要会员点击[注销]退出的,就不...

    凹丫丫新闻发布系统 4.7

    8,安装使用方便,你只需把头部文件top.asp换成你的就可以了 后台管理登陆地址:http://你的网站地址/admin/ 后台管理 用户名:oyaya 密码是:www.oyaya.net -------------------------------------------------...

    网页广告 代码全集 js 广告代码 大全 1-61 (A)

    37:TOP排列幻灯广告代码下载 38:下拉显示幻灯广告代码下载 39:文字上翻幻灯广告代码下载 40:随数字快速翻动幻灯代码下载 41:随图片快速翻动幻灯代码下载 42:两边漂浮和中间漂浮组合下载 43:随机显示广告图片...

    悲情城市 v 1.0

    字段hits(数字) 字段byte(数字) 字段re(数字) 字段top(数字) 字段close(数字) 字段ip(文本) 字段last(文本) 表admin 字段id(自动编号) 字段name(文本) 表rebbs 字段id(自动编号) 字段subject...

    toyaya网站管理系统

    还可以设置显示与隐藏7、修复了后台修改文章的错误8、增加了后台文件批量...置顶增加了文章推荐增加了文章标题加亮增加了单独的友情链接页增加了留言板优化了文章浏览页优化了文章评论增强了首页图片新闻V3.112优化了...

    记事狗微博系统 v4.0.5 Build20130510

    14、邮件提醒抓回用户,即可即时消息提醒、也可以定期top内容通知; 15、创新左侧导航,即有两栏的大气、又有三栏的明了,随意开启关闭; 16、附件功能更完善,上传下载都有积分,还可指定用户组不受积分限制等; 17...

    凹丫丫文章新闻网站源码access080702

    8,安装使用方便,你只需把头部文件top.asp换成你的就可以了 后台管理登陆地址:http://你的网站地址/admin/ 后台管理 用户名:admin 密码是:www.oyaya.net -----------------------------------------------------...

    凹丫丫文章新闻网站源码sql080702

    8,安装使用方便,你只需把头部文件top.asp换成你的就可以了 后台管理登陆地址:http://你的网站地址/admin/ 后台管理 用户名:admin 密码是:www.oyaya.net -----------------------------------------------------...

    记事狗微博系统最新官方版

    14、邮件提醒抓回用户,即可即时消息提醒、也可以定期top内容通知; 15、创新左侧导航,即有两栏的大气、又有三栏的明了,随意开启关闭; 16、附件功能更完善,上传下载都有积分,还可指定用户组不受积分限制等; 17...

    Too Naughty网址导航主题-PHP

    方便布局文章内容元素样式调整经典编辑器添加对应样式预览网址块添加nofollow属性开关(基础设置)添加全站图片灯箱增加go跳转白名单(基础设置...安全设置)增加评论过滤(安全设置)添加友情链接模板页增加big搜索框...

    凹丫丫新闻发布系统源码 V4.7sql版本

    8,安装使用方便,你只需把头部文件top.asp换成你的就可以了 安装方法: 1、打开SQL企业管理器,新建一个数据库 2、打开SQL企业管理器工具里的SQL查询分析器,将文件包里的oyayanews.sql里的代码复制到SQL查询分析...

    凹丫丫新闻发布系统源码V4.5.1

    6,安装使用方便,你只需把头部文件top.asp换成你的就可以了 后台管理登陆地址:http://你的网站地址/admin/ 后台管理 用户名:admin 密码是:www.oyaya.net -----------------------------------------------------...

    python入门到高级全栈工程师培训 第3期 附课件代码

    08 top命令 09 free命令 10 进程管理 第6章 01 上节课复习 02 磁盘分区 03 文件系统与挂载 04 挂载信息讲解 05 磁盘用满的两种情况 06 软连接和硬链接 07 软连接和硬链接补充 第7章 01 ip地址与子网划分 02 ip...

Global site tag (gtag.js) - Google Analytics