扒皮下音悦台的“返回顶部”图标效果

昨晚想仿造下音悦台首页“返回顶部”的小超人效果，觉得这东西的实现很简单，应该不会费时超过一个钟。结果撸代码的过程发现存在很多意想不到的问题。

先发个图：

有兴趣的朋友可以去音悦台点一下这个小超人图标试一试，默认是隐藏的，滚动条下拉一小段距离后会从下面飞上来悬停在右下角，点击的时候不但浏览器滚动条会返回顶端，小超人也会往上飞到顶部消失掉。

不过我印象中，以前若鼠标移到图标上，小超人会变成一个动态（小超人的披风会摆动）的gif图，不过现在取消了这效果，可能是因为gif毕竟不是png，多少带有些锯齿影响了美观。

继续到咱“理思路”时间，我们要实现的效果如下图所示，即开始和结束状态，悬浮图标都是位于窗口下方看不到的地方，当浏览器滚动条被拉动一小段距离（假设250px）后，图标从下向上移动到某个看得到的位置（假设距离浏览器底部50px）并一直悬浮于此，只有点击后触发浏览器滚动条置顶，并让自己垂直飞到顶端消失（消失后重回底部看不到的位置）：

先写下原型：

<head>
<style>
.long{width:100%; height:1000px;}
.long2{width:100%; height:900px;background-color:yellow;}
a{display:block; position:fixed; z-index:50px; right:10px; width:30px; height:30px; background-color:green;}
</style>
<script src="jq.js"></script>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body><a href="javascript:void(0);"></a><!--返回顶部的悬浮图标--><div class="long">占位符啊占位符</div><div class="long2">依旧是占位符啊占位符。。。</div></body>

View Code

初步脚本：

    var $toTop = $("a"), $win=$(window);var a_h = $toTop.height();var a_btm = 150;   //悬浮距离var act_h = 250;   //触发图标出现的下拉框下拉距离$toTop.css("bottom",-a_h); //默认图标位于看不到的窗口下方var f1 = function(){$toTop.css({"bottom" : -a_h});}var f2 = function(){$toTop.animate({"bottom":a_btm},400,function(){$toTop.css({"bottom":a_btm});  //图标从下飞上来后固定住位置不变if($win.scrollTop()<act_h) f1();  //处理“图标飞动过程用户又将下拉框拉到上面”的事件
        });}////滚动条滚动事件scrollFun = function(){if($win.scrollTop()<act_h) f1();else f2();}$win.on("scroll resize",scrollFun);$toTop.click(function(){$toTop.stop().animate({bottom:$win.height()},500);  //图标飞到上面消失掉$('body,html').stop().animate({scrollTop:0},500);   //下拉框返回顶部})

其中f1对应 “初始化时，图标位于下面看不到的状态”；

f2对应 “下拉框拖动到某个距离（本例为250px）时，图标从下面飞上来的状态，并一直处于悬浮位置的状态”；

注意这里f2使用了animate的callback，要求图标飞上来后才修改其bottom值，避免覆盖了动画效果。

另外这里需要考虑避免f2重复执行的情况，毕竟拖动下拉框的时候是不断地在触发窗体scroll事件，会导致f2的动画不断进入图标的动作队列。当然有同学会考虑用stop()解决，但那样会导致卡顿的情况，无法实现音悦台那样流畅的效果。

所以咱们只要让f2只执行一次即可，当下拉框拉回顶部的时候则重置其可执行状态，可以利用标志位实现，脚本修改为：

    var flag = !0;   //新增标志位var $toTop = $("a"), $win=$(window);var a_h = $toTop.height();var a_btm = 150; var act_h = 250;  $toTop.css("bottom",-a_h); var f1 = function(){$toTop.css({"bottom" : -a_h});flag = !0;   //重置标志位
    }var f2 = function(){flag = !1;  //修改标志位，避免f2重复执行$toTop.animate({"bottom":a_btm},400,function(){$toTop.css({"bottom":a_btm});if($win.scrollTop()<act_h) f1();});}////滚动条滚动事件scrollFun = function(){if($win.scrollTop()<act_h) f1();else if(flag) f2();   //标志位为true才可执行
    }$win.on("scroll resize",scrollFun);$toTop.click(function(){$toTop.stop().animate({bottom:$win.height()},500);  $('body,html').stop().animate({scrollTop:0},500);  })

可见这里定义了个标志位flag，初始化状态为true，且只有true的情况下f2才能执行，但f2执行时也顺便把flag改为fail状态（f1执行时会重置为true）。

另外这段代码依旧有问题，因为当用户点击图标之后，触发下拉框滚到顶部的过程中，也在不断地触发scrollFun事件，会导致图标还没来得及飞到上面消失掉时，就触发了f1，从而导致图标只飞了一小段距离就消失不见。

解决方法其实很简单，在用户点击图标时，通过.off()解除图标对scrollFun事件的绑定即可，然后在图标飞到上方消失了的动画完成后，再重新绑定即可。最终代码如下

    var flag = !0;var $toTop = $("a"), $win=$(window);var a_h = $toTop.height();var a_btm = 150;   var act_h = 250; $toTop.css("bottom",-a_h); var f1 = function(){$toTop.css({"bottom" : -a_h});flag = !0;}var f2 = function(){$win.off("scroll resize",scrollFun);$toTop.animate({"bottom":a_btm},400,function(){flag = !1;$toTop.css({"bottom":a_btm});$win.on("scroll resize",scrollFun);if($win.scrollTop()<act_h) f1();});}////滚动条滚动事件scrollFun = function(){if($win.scrollTop()<act_h) f1();else if(flag) f2();}$win.on("scroll resize",scrollFun);$toTop.click(function(){$win.off("scroll resize",scrollFun);  //解绑scrollFun$toTop.stop().animate({bottom:$win.height()},500,function(){$win.on("scroll resize",scrollFun);  //重绑scrollFun
            });$('body,html').stop().animate({scrollTop:0},500);})

最后弱弱地说下，鉴于苹果移动设备（ios5及更旧版本）对fixed的支持不理想，如果是做wap站点则建议将定位更换为absolute并通过修改top值来实现图标动画效果，或者直接使用iscroll.js来实现。

共勉~

转载于:https://www.cnblogs.com/vajoy/p/3852246.html

扒皮下音悦台的“返回顶部”图标效果相关推荐

discuz论坛添加、更换返回顶部图标
论坛没有返回顶部功能的的在你的footer.htm(/template/default/common/)里面添加代码 01.<spanid="scrolltop"οnclic ...
html5 回到顶部按钮,“返回顶部”按钮效果
"返回顶部"按钮效果 pc端: 返回顶部 .wrapper { width: 1150px; height: 3582px; border: 2px solid black; } ...
javascript 设置返回顶部的效果
动态效果要求: 点击按钮之后可以由快到慢地回到顶部,处于顶部位置时按钮消失,按钮位于页面的右下方实现原理: 设置对返回顶部按钮的单机响应函数在此函数内部定一个返回顶部计时器 returnTop 在 ...
html锚点怎么返回顶部,滑动效果的返回顶部锚点按钮
'TOP'置顶链接,说的通俗一点就是'返回顶部的链接','go to top '一般都放在页面的底部,它可以快速返回页面顶部,以节省用户浏览页面的时间. 它主要的应用场景是当你有一个很长的网页内容时 ...
通过组件实现小程序底部Top按钮滑动到底部显示，其他情况则隐藏，点击按钮之后返回顶部的效果
前言提示:此篇是基于QQ小程序,但微信小程序的实现原理也基本都差不多. 所涉及到的知识点,先罗列一下: 1.监听页面滚动以及触发回顶部:onPageScroll 2.获取页面高度:createSel ...
前端开发——图标返回顶部功能
前端开发--点击图标,返回顶部功能功能实现:网页右下角的一键返回顶部图标方法:利用周期性定时器+鼠标滚动事件 html: <div id="retutop">< ...
jquery返回顶部特效代码网页滚动返回顶部特效
网页悬浮返回顶部图标可以说是一项非常常见切比较实用的功能,可以使用HTML来实现,但是返回顶部效果太过僵硬,体验不好,这里分享一个纯js返回顶部切具有过渡效果的实例. 效果如上图所示. 具体代码如下: ...
返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 如果你看到这段文字,说明转自<一棵树-博客园>,原文链接:http://www.cnb ...
html返回顶部_Jquery实现一键返回顶部
一.需求分析当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位 ...

扒皮下音悦台的“返回顶部”图标效果

扒皮下音悦台的“返回顶部”图标效果相关推荐

最新文章

热门文章