原生js实现淘宝首页点击按钮缓慢回到顶部效果

 更新时间:2014年04月06日 17:28:15   作者:  
本例将实现这样的一个效果:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字。点击按钮缓慢回到顶部
淘宝首页的回到顶部按钮是这样的:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字。点击按钮缓慢回到顶部

我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加mouseover, mouseout事件。要侦听滚动条的变化,所以需要给window添加scroll事件,点击按钮回到顶部,按钮添加click事件。我们将事件处理程序封装成三个函数moveIn, moveOut, goTop;

下面先给出html/css代码
复制代码 代码如下:

<div class="container">
<div class="header">头部</div>
<div class="content">主要内容,高度是2000px</div>
<div class="footer>底部</div>
<div id="btn">返回顶部</div>
</div>

复制代码 代码如下:

.container { width: 980px; margin: 0 auto; height: auto; background: #aaa;}
.content { height: 2000px; border: 1px solid blue; }
#btn {
position:fixed;
bottom: 50px;
right: 0;
width: 54px;
height: 55px;
background: url(icons.png) no-repeat 0 -110px; } //背景图可随意找一张
font-size: 12px;
line-height: 55px;
text-align: center;
text-indent: -9999em;
cursor: pointer;
display: none;

下面是完整的js代码
复制代码 代码如下:

window.addEventListener("load",function() {
var btn = document.getElementById("btn");
btn.addEventListener("mouseover",moveIn, false);
btn.addEventListener("mouseout", moveOut, false);

function moveIn() {
btn.style.color = "#ffffff"; //修改的是内联样式,具有最高的优先级;
btn.style.textIndent = "0em";
btn.style.backgroundImage = "none";
btn.style.backgroundColor = "#FF4401";
}
function moveOut() {
btn.style.textIndent = "-9999em";
btn.style.backgroundImage = "url(icons.png)";
}

function goTop(acceleration, time) { //修改参数可调整返回顶部的速度
acceleration = acceleration || 0.1;
time = time || 10;
var speed = 1 + acceleration;
function getScrollTop() { //取得滚动条的竖直距离
return document.documentElement.scrollTop || document.body.scrollTop;
}
function setScrollTop(value) { //设置滚动条的竖直距离,实现效果的关键就是在很短的间隔时间内不断地修改滚动条的竖直距离,以实现滚动效果
document.documentElement.scrollTop = value;
document.body.scrollTop = value;
}
window.onscroll = function() {
var scrollTop = getScrollTop();
if (scrollTop > 100) { //判断滚动条距离窗口顶部多远时显示出来,这里是100px
btn.style.display = "block";
} else {
btn.style.display = "none";
}
};
btn.onclick = function () {
var timer = setInterval(function() {
setScrollTop(Math.floor(getScrollTop() / speed)); //这行代码是关键,取得滚动条竖直距离,除以speed后再给滚动条设置竖直距离
if (getScrollTop() == 0)
clearInterval(timer);
}, time);
};
}
goTop(0.2, 8);
}, false);

当然,还有其他的实现方法,下面给出其他方法的关键代码
复制代码 代码如下:

btn.onclick = function() {
clearInterval(timer);
var timer = setInterval(function() {
var now = scrollTop; //滚动条竖直距离
speed = (0 - now) / 10;
speed = Math.floor(speed);
if (now == 0);
clearInterval(timer);
document.documentElement.scrollTop = now + speed; //标准模式下的浏览器
document.body.scrollTop = now + speed; //怪异模式下的浏览器
}, 15);
}

 
这里的代码主要还是参考了网上其他资源,再加了一点自己的理解。当然还有其他实现方法,比如JavaScript最早时间就支持的window.scrollTo()。用jQ来实现的话代码量将会变得很少,可参看w3cplus

个人觉得,先学好原生JavaScript,比如搞清楚数据类型,闭包,继承,作用域,DOM,CSS,事件处理,Ajax等,用熟练后学习其他框架将会容易很多。

相关文章

  • JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)

    JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)

    下面小编就为大家带来一篇JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 微信小程序使用WxJava获取用户手机号步骤

    微信小程序使用WxJava获取用户手机号步骤

    这篇文章主要介绍了微信小程序使用WxJava获取用户手机号的相关资料,还详细讲解了WxMpService接口的主要功能和常用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-12-12
  • js实现单击图片放大图片的方法

    js实现单击图片放大图片的方法

    这篇文章主要介绍了js实现单击图片放大图片的方法,涉及javascript操作图片的技巧与onclick事件的用法,需要的朋友可以参考下
    2015-02-02
  • ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解

    ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解

    这篇文章主要介绍了ES6中Set和Map数据结构,Map与其它数据结构互相转换操作,结合实例形式详细分析了ES6中的Set和Map数据结构的概念、原理、遍历、去重等操作,以及Map与其它数据结构互相转换操作,需要的朋友可以参考下
    2019-02-02
  • JavaScript中Webpack的使用教程

    JavaScript中Webpack的使用教程

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,这篇文章主要介绍了JavaScript中Webpack的使用,需要的朋友可以参考下
    2021-10-10
  • javascript实现随机生成DIV背景色

    javascript实现随机生成DIV背景色

    这篇文章主要介绍了javascript实现随机生成DIV背景色的具体代码,如何设置DIV背景色为随机色,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JavaScript实现快速排序的方法

    JavaScript实现快速排序的方法

    这篇文章主要介绍了JavaScript实现快速排序的方法,实例分析了javascript快速排序的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • Javascript  Constructor构造器模式与Module模块模式

    Javascript  Constructor构造器模式与Module模块模式

    这篇文章主要介绍了Javascript  Constructor构造器模式与Module模块模式,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • 基于BootStrap的图片轮播效果展示实例代码

    基于BootStrap的图片轮播效果展示实例代码

    这篇文章主要介绍了基于BootStrap的图片轮播效果展示实例代码的相关资料,需要的朋友可以参考下
    2016-05-05
  • JavaScript实现SHA-1加密算法的方法

    JavaScript实现SHA-1加密算法的方法

    这篇文章主要介绍了JavaScript实现SHA-1加密算法的方法,实例分析了使用javascript实现SHA-1加密算法的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03

最新评论