jquery animate运行后 自动回到顶部问题（已解决）

jquery animate运行后 自动回到顶部问题（已解决）

问题描述

使用 animatescroll.js 或者 animate() 方法来控制，页面移动到锚点位置；当页面移动到指定位置之后，会自动又回到页面顶部。

环境：手机 h5、chrome 浏览器 调试

需求：定位到有问题的人员行

原因

当页面中有其他 <a href="#">或者类似的标签时，可能会触发上述 bug。

解决方法

增加对应位置的 stop(true) 方法

以 animatescroll.js 为例

源码中调用部分核心代码如下

...此处省略N行代码
var offset = this.offset().top;
$(opts.element).stop().animate({ scrollTop: offset - opts.padding}, opts.scrollSpeed, opts.easing);
...
    // default options
    $.fn.animatescroll.defaults = {        
        easing:"swing",
        scrollSpeed:800,
        padding:0,
        element:"html,body"
    }; 

默认是 800ms，移动到指定锚点。

增加代码 800ms 后 $(opts.element).stop(true);停止动画效果

        setTimeout(function() {
            // make sure the callback is a function
            if (typeof opts.onScrollEnd == 'function') {
                // brings the scope to the callback
                opts.onScrollEnd.call(this);
                $(opts.element).stop(true);
            }
        }, opts.scrollSpeed);

当然 animatescroll.js 是增加一个 onScrollEnd的滚动后函数；我们传一个空的函数即可。
调用代码如下：

var method = function method() {
    return false;
}
...此处省略N行代码
$("#userIndex" + i).animatescroll({onScrollEnd: method, padding: 30}); //滚动到这个位置

如果不是用 animatescroll.js 直接 setTimeout('stop()',800),自己写一个停止函数即可。