js脚本编写教程 js网页编程( 四 )

.phone .container #toTop { width: 40px; height: 60px; display: inline-block; position: absolute; background: url(top.png) no-repeat; background-size: 100%; bottom:80px; right: 15px; opacity: 0.7;}引进来了。
4. js控制我们通过jQuery的animate方法来实现回到顶部的动画，实现该功能的核心逻辑就是控制滚动条距离顶部的高度，也就是scrollTop，让它变为0就可以了。
//单机图标直接返回顶部$('#toTop').on('click',function(){ $('.phone .container').eq(0).stop(true, true).animate({ scrollTop: 0},500,function(){ $('#toTop').css({'opacity' : 0});});return false;});最后，我们还希望实现的一个效果就是，只有在滚动条往上拖动的时候，才把按钮显示出来，否则就隐藏该按钮。毕竟，我们在阅读的时候都不希望一直有个小图标吧。
实现思路也很简单，就是判断当前滚动条到底是向上滚动呢，还是向下滚动？
然后设置按钮的透明度就行了，这时候，我们需要对滚动条进行监听，如果向上滚动就显示按钮，否则隐藏按钮，实现代码如下：
var justScrollTop = 0; //记录上一次滚动条距离顶部的位置//滚动条监听事件$('.phone .container').on('scroll',function(e){ if(e.target.scrollTop > justScrollTop){ $('#toTop').css({'opacity' : 0}); //隐藏 }else{ $('#toTop').css({'opacity' : 0.8}); //显示 }justScrollTop = e.target.scrollTop;});效果：

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：