代码如下:
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 });
事件只运行一次,而且控制台看不到绑定的事件
16行:
$(window).on('scroll', checkpos($this, opts)); 修改为 $(window).on('scroll', function(){ checkpos($this, opts) });
修改之后报错 TypeError: g.handler.apply is not a function
@小kk06: 这个你要针对性的断点跟一下哦。报错的意思就是说这个handler要么没有apply,要么apply不是一个function。
@小kk06: 你下面的move和go同样有这个问题。
@幻天芒: 嗯 但是修改为bind之后也有这个问题 不知道是不是修改的方法不对
$(this).bind("click",move(opts));
这样修改可以吗
@小kk06: 并不是这样。是对move进行bind。move.bind(this, opts))
@幻天芒: 在click funciotn 中绑定事件使用call调用事件没有报错 但是直接调用move(opts)也没有问题
@小kk06: 效果不一样哇~
@幻天芒: 直接调用move方法的话应该是和call是同样的this指向吧 为社么效果会不一样呢
@小kk06: 调用call的话,需要自己指定this。
@幻天芒: 嗯嗯 感觉这样效果确实是一样的
建议给代码加上高亮
编辑器中插入代码的按钮
@dudu: 我能说,"View Code"点不开么?我都是控制台改样式才能看到。
@幻天芒: 目前折叠代码的确打不开,我们会尽快修复这个问题。