首页 新闻 赞助 找找看

尝试写一个回到顶部的插件但是无法给元素绑定事件

-1
悬赏园豆:30 [已解决问题] 解决于 2016-04-13 14:40

代码如下:

 1 (function($) {
 2     $.fn.scrollto = function(options) {
 3         // 将用户传递的参数去覆盖默认的参数然后返回一个新的对象
 4         this.opts = $.extend({}, $.fn.scrollto.defaults, options);
 5         console.log(this);
 6         return this.each(function() {
 7             $this = $(this);
 8             // $this.fadeOut();
 9             console.log($this);
10             $root = $('html,body');
11             console.log($root);
12             var opts = $.extend({}, $.fn.scrollto.defaults, options);
13             console.log(opts);
14             // checkpos($this,opts);
15 
16             $(window).on('scroll', checkpos($this, opts));
17 
18             if (opts.mode == 'move') {
19                 $this.on("click", move(opts));
20             } else {
21                 $this.on("click", go(opts));
22             }
23 
24         });
25 
26 
27 
28     };
29 
30     // private function
31     function checkpos(obj, opts) {
32         console.log($(window).scrollTop());
33         // document.title=$(window).scrollTop();
34         if ($(window).scrollTop() > opts.pos) {
35             obj.fadeIn();
36         } else {
37             obj.fadeOut();
38         }
39     }
40 
41 
42     // private function
43     function move(opts) {
44         console.log(this);
45         // var opts = this.opts,
46         //     dest = opts.dest;
47         if ($(window).scrollTop() !== opts.dest) {
48             if (!this.$root.is(':animated')) {
49                 $root.animate({
50                     scrollTop: opts.dest
51                 }, opts.speed);
52             }
53         }
54     }
55 
56     // paivate function
57     function go(opts) {
58         console.log(this);
59         var dest = opts.dest;
60         if ($(window).scrollTop() != dest) {
61             $root.animate({
62                 scrollTop: dest,
63             });
64         }
65     }
66 
67     $.fn.scrollto.defaults = {
68         pos: $(window).height(),
69         dest: 0,
70         speed: 800,
71         mode: 'move'
72     };
73 })(jQuery);
74 
75 
76 $("#backTop").scrollto({
77     mode: 'move'
78 });

事件只运行一次,而且控制台看不到绑定的事件

小kk06的主页 小kk06 | 初学一级 | 园豆:56
提问于:2016-04-13 09:47
< >
分享
最佳答案
0

16行:

$(window).on('scroll', checkpos($this, opts));

修改为

$(window).on('scroll', function(){
  checkpos($this, opts)
});

 

收获园豆:30
幻天芒 | 高人七级 |园豆:37175 | 2016-04-13 13:23

修改之后报错 TypeError: g.handler.apply is not a function

小kk06 | 园豆:56 (初学一级) | 2016-04-13 13:38

@小kk06: 这个你要针对性的断点跟一下哦。报错的意思就是说这个handler要么没有apply,要么apply不是一个function。

幻天芒 | 园豆:37175 (高人七级) | 2016-04-13 14:57

@小kk06: 你下面的move和go同样有这个问题。

幻天芒 | 园豆:37175 (高人七级) | 2016-04-13 14:58

@幻天芒: 嗯 但是修改为bind之后也有这个问题 不知道是不是修改的方法不对

                 $(this).bind("click",move(opts));
这样修改可以吗

小kk06 | 园豆:56 (初学一级) | 2016-04-13 16:28

@小kk06: 并不是这样。是对move进行bind。move.bind(this, opts))

幻天芒 | 园豆:37175 (高人七级) | 2016-04-14 08:38

@幻天芒: 在click funciotn 中绑定事件使用call调用事件没有报错 但是直接调用move(opts)也没有问题

小kk06 | 园豆:56 (初学一级) | 2016-04-29 13:17

@小kk06: 效果不一样哇~

幻天芒 | 园豆:37175 (高人七级) | 2016-05-03 21:18

@幻天芒: 直接调用move方法的话应该是和call是同样的this指向吧 为社么效果会不一样呢

小kk06 | 园豆:56 (初学一级) | 2016-05-09 23:57

@小kk06: 调用call的话,需要自己指定this。

幻天芒 | 园豆:37175 (高人七级) | 2016-05-10 09:40

@幻天芒: 嗯嗯 感觉这样效果确实是一样的

小kk06 | 园豆:56 (初学一级) | 2016-05-10 16:46
其他回答(1)
0

建议给代码加上高亮

dudu | 园豆:31075 (高人七级) | 2016-04-13 10:06

编辑器中插入代码的按钮

支持(0) 反对(0) dudu | 园豆:31075 (高人七级) | 2016-04-13 10:22

@dudu: 我能说,"View Code"点不开么?我都是控制台改样式才能看到。

支持(0) 反对(0) 幻天芒 | 园豆:37175 (高人七级) | 2016-04-13 13:19

@幻天芒: 目前折叠代码的确打不开,我们会尽快修复这个问题。

支持(0) 反对(0) dudu | 园豆:31075 (高人七级) | 2016-04-13 13:26
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册