jquery在android中单击时滚动到div的顶部答案

【问题标题】：jquery scroll to the top of a div on click in androidjquery在android中单击时滚动到div的顶部
【发布时间】：2014-04-13 17:03:56
【问题描述】：

我有一个不同的溢出设置为滚动和按钮，单击时会滚动回顶部。

<!DOCTYPE html>
<html>
    <head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <meta charset="utf-8">
    <style>
        .pages{
            position:absolute;
            top:30px;
            bottom:0px;
            left:0px;
            right:0px;
            border:0;
            overflow:scroll;
        }

        .pages div{
            position:relative;
            width:100%;
            height:300px;
            border:solid 1px #CDCDCD;
            border-top-style:none;
            border-left-style:none;
            border-right-style:none;
        }
    </style>
    <script>
        $(document).ready(function(e) {
            $('#new_pages').click(function(event){
                event.preventDefault();
                //add new page data
                //scroll to top
                $('#mag_pages').animate({
                    scrollTop:0
                    },900);

            });
        });
    </script>
</head>
<body>
    <div class="new_pages" id="new_pages">
            <div id="count">10+</div>
            <div id="text">New Pages</div>
        </div>
    <div class="pages" id="mag_pages">
           <div>Page 1</div>
           <div>Page 2</div>
           <div>Page 3</div>
           <div>Page 4</div>
           <div>Page 5</div>
    </div>
</body>
</html>

经过一番谷歌搜索后，我仍然没有进一步前进。 scrollTop:0 是所有帖子所说的。是否动画对我不起作用。有没有另一种方法来实现这一点。当我在移动设备上测试代码时，该代码在计算机上运行良好，滚动功能不起作用。移动设备是否必须以不同的方式定位？

【问题讨论】：

为我工作：jsfiddle.net/UQTY2/307
奇怪的是，这是否必须针对移动设备进行不同的定位
检查你的控制台 (F12) 你肯定有一些 JS 错误会阻止你这边的 JS 脚本执行。
没有任何东西在我的笔记本电脑上运行，但是当我在我的设备上测试它时它不会滚动回顶部
你用的是什么设备？

标签： javascript jquery html css scroll

【解决方案1】：

可能 JQuery 滚动或动画功能在移动设备中存在一些问题。

尝试使用纯 JS，而不是 JQuery：

<!DOCTYPE html>
<html>
    <head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <meta charset="utf-8">
    <style>
        .pages{
            position:absolute;
            top:30px;
            bottom:0px;
            left:0px;
            right:0px;
            border:0;
            overflow:scroll;
        }

        .pages div{
            position:relative;
            width:100%;
            height:300px;
            border:solid 1px #CDCDCD;
            border-top-style:none;
            border-left-style:none;
            border-right-style:none;
        }
    </style>
    <script>
        function newPagesClicked(){
             //add new page data
             //scroll to top
             scrollToTop
        }
        function scrollToTop(scrollDuration) {
            var scrollStep = -window.scrollY / (scrollDuration / 15),
            scrollInterval = setInterval(function(){
                if ( window.scrollY != 0 ) {
                    window.scrollBy( 0, scrollStep );
                }
                else clearInterval(scrollInterval); 
           },15);
        }
    </script>
</head>
<body>
    <div class="new_pages" onclick="newPagesClicked()" id="new_pages">
            <div id="count">10+</div>
            <div id="text">New Pages</div>
        </div>
    <div class="pages" id="mag_pages">
           <div>Page 1</div>
           <div>Page 2</div>
           <div>Page 3</div>
           <div>Page 4</div>
           <div>Page 5</div>
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

我在我的一个项目中使用了这样的代码并且它有效，尝试修改您的代码，如下所示：

$(document).ready(function(e) {
    $('#new_pages').click(function(event){
        event.preventDefault();
        //add new page data
        //scroll to top
        $('html, body').animate({
            scrollTop:$('#mag_pages').offset().top
            },900);

    });
});

【讨论】：

在台式机上运行良好，但在移动设备上无法正常运行 - 请参阅更新