[Html]解决微信浏览器内scrollTop失效问题

问题

scrollTop在其他浏览器读取正常，通过 JQuery的 animate()方法能滑动到指定位置，微信开发者工具也正常，然而在微信浏览器内失效。

解决过程

1.原先我以为可能是浏览器不支持某个语法，但是通过调试发现函数前后都可以执行，分别跳出1和2，那么不存在语法报错问题，

//原函数
function scrollBtn(){
    alert(1)    //通过alert来调试验证执行是否报错
    $('#footer') && $("html,body").animate({"scrollTop":$("#footer")[0].offsetTop},500)   //判断DOM对象并执行滑动到指定位置效果
    alert(2)    
}

2.测试是否是因为scrollTop的问题，发现页面无论滑动至何处始终为0

function scrollBtn(){
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    alert(scrollTop)    //通过alert来调试验证执行是否报错
    $('#footer') && $("html,body").animate({"scrollTop":$("#footer")[0].offsetTop},200)   //判断DOM对象并执行滑动到指定位置效果
    alert(2)    
}

3.既然是scrollTop的问题，经查找资料得知，scrollTop需要子div空间超出父div空间才可以，即 $('#father').height()>$('#children').height()，所以scrollTop不会生效，那么我们开始改造html代码!

方案一：

html,body{
        padding:0;
        margin:0;
        overflow: auto;
        height:auto;
        width:100%;
    }

可以最快解决scrollTop失效问题。但是获取和屏幕尺寸相同的容器时比较麻烦，所以我研究了第二种方案。

方案二：

    
    

    

        

            

                Here is Header...
            
            

                
                Go Footer!
                
Hello World!
            
            

                
this is Footer
            
        
    

使用div将内容再次进行包裹，把

当做是来看，内部DOM对象将通过样式overflow:auto实现溢出的内容滚动，和

同级并使用match样式能保证适用容器和屏幕的宽高一致

    
    

    

            

                Here is Header...
            
            

                
                Go Footer!
                
Hello World!
            
            

                
this is Footer
            
        

---

以上内容作者原创，未经作者同意禁止转载。