解决zepto 回到顶部动画

Posted 2020-10-10 静静的fire

 1     var $this = $(‘.container-scroll‘);
 2         $goup = $(‘.goup‘);
 3         var winheight = $(window).height();
 4         // var conheight = $this.get(0).scrollHeight;
 5         var offtop =winheight - $this.offset().top;//元素可视区的高度
 6         var isstart = true;
 7         // console.log(winheight+‘屏幕可视高度‘);
 8         // console.log(conheight+‘内容实际高度‘);
 9         // console.log(offtop+‘距离浏览器顶部高度‘);
10         // console.log($(window).height()+‘浏览器当前窗口可视区域高度‘); 
11         // console.log($(document).height()+‘浏览器当前窗口文档的高度‘);         
12         // console.log($(document.body).height()+‘浏览器当前窗口文档body的高度‘); 
13     $this.on(‘scroll‘,function () {
14         if ($this.scrollTop() >= offtop) {
15             $goup.css({‘opacity‘:.5,‘bottom‘:40+‘px‘});
16         }else if($this.scrollTop() <= offtop){
17             $goup.css({‘opacity‘:.5,‘bottom‘:-40+‘px‘});
18         }
19     });
20     $goup.on(‘click‘,function () {
21         isstart = true;
22         gotop();
23     });
24     $this.on(‘touchstart‘,function () {
25         console.log(‘1‘);
26         isstart =false;
27     })
28     function gotop(){
29         var y = Math.max(0,$this.scrollTop());
30         var speed = 1.1;
31         $this.scrollTop( Math.floor(y / speed));
32         if ($this.scrollTop() > 0 && isstart) {
33            setTimeout(gotop, 10);
34         }
35     }