`
zzc1684
  • 浏览: 1220970 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

用 JavaScript 实现变速回到顶部

    博客分类:
  • Js
Js 
阅读更多

一般网页的下方都会放置一个置顶按钮, 尤其是页面底部没有导航的网页, 这样可以帮助访客重新找到导航或者重温一遍广告 (想得真美). 随着近几年来 JavaScript 的应用日渐广泛, 滑动效果无处不在, 于是我也跟跟风, 将置顶功能做成了滑动效果. 后来为了更贴合物理特征, 改造做成了减速的滑动效果.

首先说一下原理吧. 我们会获取滚动条到页面顶部的距离, 然后上移一定的距离; 再获取滚动条到页面顶部的距离, 上移一定的距离 (比上一次小一点); ...

 

JavaScript 代码:

/**
 * 回到页面顶部
 * @param acceleration 加速度
 * @param time 时间间隔 (毫秒)
 **/
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);
	}
}

document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其实都是一样的, 但它们只在某些浏览器中起作用. 至于那哪个在哪些浏览器起作用可以自己调试一下.

HTML 代码:

<a href="#" onclick="goTop();return false;">TOP</a>
分享到:
评论

相关推荐

    js实现变速返回顶部底部

    本篇文章将详细探讨如何使用JavaScript(JS)来实现这一功能,并且讨论如何实现变速滚动,即在滚动过程中具有平滑过渡的效果,提升用户的交互体验。 首先,我们需要在HTML中创建一个“返回顶部”的按钮元素。可以...

    JavaScript回到顶部功能实现

    至此,一个基本的JavaScript"回到顶部"功能已经实现。这个功能可以根据需求进行优化,例如添加动画效果、改变按钮的显示状态(如颜色变化)或者调整触发显示按钮的滚动距离。 在实际项目中,为了代码组织的清晰,...

    回到顶部,纯javascript代码编写

    然后,我们用JavaScript监听滚动事件,当页面滚动到一定高度时显示“回到顶部”按钮。可以设置一个阈值,如500像素: ```javascript window.onscroll = function() { var scrollTop = document.documentElement....

    Javascript返回顶部代码实现

    以上就是使用JavaScript实现返回顶部功能的主要步骤和涉及的知识点。这个简单但实用的功能可以通过自定义CSS样式和JavaScript逻辑进行扩展,以适应不同网站的设计需求。通过阅读和理解上述代码,你可以创建自己的...

    javascript 实现的进度条效果

    javascript 实现的进度条效果 javascript 实现的进度条效果

    javascript实现购物车特效

    用javascript实现购物车特效

    JavaScript实现的类似淘宝网顶部导航菜单demo

    在JavaScript实现的类似淘宝网顶部导航菜单的项目中,我们主要关注的是前端开发技术,特别是JavaScript作为主要的脚本语言,以及ECMAScript规范对它的影响。这个demo旨在模拟淘宝网的用户界面,提供购物车、收藏夹、...

    基于JavaScript实现三角格子棋盘五子棋.zip

    基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip...

    JavaScript实现tab栏切换效果

    JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计,用于在不同的内容区域之间进行切换,通常用在页面顶部或侧边的导航菜单。在这个例子中,我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...

    JavaScript实现轮播特效(代码)

    JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播...

    web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码

    web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...

    基于JavaScript实现的程序员表白爱心代码(2套)

    基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的...

    javaScript实现另存为功能

    在JavaScript中实现“另存为”功能并不直接,因为出于安全考虑,浏览器并不提供直接调用“另存为”对话框的API。但是,我们可以通过一些技巧来模拟这一行为。以下是一些关键知识点: 1. **创建Blob对象**:首先,...

    银行家算法-javascript实现.zip

    银行家算法-javascript实现.zip 银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现...

    基于原生JavaScript实现的扫雷小游戏.zip

    基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的...

    JavaScript实现俄罗斯方块.rar

    JavaScript实现的俄罗斯方块是一款基于浏览器的经典游戏,它利用了JavaScript这门强大的客户端脚本语言,为用户在网页上提供了一种重温经典游戏的方式。在本文中,我们将深入探讨JavaScript如何构建这样的游戏,并...

    用JavaScript实现跨平台棋牌游戏.pdf

    "用JavaScript实现跨平台棋牌游戏" 本文将分享开发一款JavaScript多人联机棋牌游戏的过程,并讨论如何使用JavaScript实现跨平台棋牌游戏。该游戏可以在iOS和Android系统下流畅运行,使用Cocos2d-x作为游戏引擎,并...

    Javascript实现的简单的转盘抽奖小案例+Javascript编程+Javascript小案例+转盘抽奖程序案例

    Javascript实现的简单的转盘抽奖小案例+Javascript编程+Javascript小案例+转盘抽奖程序案例Javascript实现的简单的转盘抽奖小案例+Javascript编程+Javascript小案例+转盘抽奖程序案例Javascript实现的简单的转盘抽奖...

    JavaScript实现的可视化表单设计器源码.zip

    JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码...

    爱心源码基于html和javascript实现的爱心源码

    爱心源码基于html和javascript实现的爱心源码爱心源码基于html和javascript实现的爱心源码爱心源码基于html和javascript实现的爱心源码爱心源码基于html和javascript实现的爱心源码爱心源码基于html和javascript实现...

Global site tag (gtag.js) - Google Analytics