javascript - 浏览器记住scroll位置,导致滚动事件失效
PHPz
PHPz 2017-04-10 18:05:55
[JavaScript讨论组]

问题:我用chrome测试我的例子:一开始滑动到1200位置处,可是过了一会儿又返回到浏览器刷新前scroll的位置。我知道浏览器有记住这个特性,那有什么方法可以解决下这个问题呢?求大神帮助下。

简易demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>scroll_test</title>
    <link rel="stylesheet" href="">
    
    <style type="text/css">
        body{
            height:4000px;
        }
        .di{ width:100%;
            background:#fff;
            position: fixed;
            top: 0px;
        }
        .di span{ 
            display: inline-block;
            width:100px;
            height:80px;
            background:orange;
            position: relative;
            cursor: pointer;
        }
    </style>    
</head>
<body>

    <p class="di">
        <span id="test">this is a test</span>
    </p>
        

<script type="text/javascript">
    var generate_ga_script = function() {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        };
        generate_ga_script();
</script>
<script type="text/javascript">
        var google_conversion_id = 1042259675;
        var google_conversion_label = "TubaCNP-5QUQ273-8AM";
        var google_custom_params = window.google_tag_params;
        var google_remarketing_only = true;
        var googlead = document.createElement('script');
        googlead.type = 'text/javascript';
        googlead.async = true;
        googlead.src = "//www.googleadservices.com/pagead/conversion.js";
        var googleadS = document.getElementsByTagName('script')[0];
        googleadS.parentNode.insertBefore(googlead, googleadS);
</script>
<script>

function ready(fn){
    if(document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function() {
            document.removeEventListener('DOMContentLoaded',arguments.callee, false);
            fn();         
        }, false);
    }else if(document.attachEvent) {  
        document.attachEvent('onreadystatechange', function() {
            if(document.readyState == 'complete') {
                document.detachEvent('onreadystatechange', arguments.callee);
                fn();      
            }
        });
    }
};
   
ready(function() {
    window.scrollTo(0,1200); 
    
    window.addEventListener('scroll', function(e){
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('scrollTop:',scrollTop);
    });  
});

</script>
</body>
</html>

浏览器刷新前位置在0测试情况:

浏览器刷新前位置在2188测试情况:

PHPz
PHPz

学习是最好的投资!

全部回复(1)
PHP中文网

每次加载页面的时候执行一次回到顶点呗

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号