CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
Paul Ledger
Paul Ledger

Reputation: 1135

jquery scroll to the top of a div on click in android

I have a different with overflow set to scroll and button that when clicked would scroll back to the top. 

<!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>

After some googling I'm still no further foreward. scrollTop:0 is all any post says. Whether animated or not doesn't work on for me. Is there another method to achieve this. The code works fine on a computer when when I test it on a mobile device the scroll function doesn't work. Do mobiles have to be targeted differently?

Upvotes: 1

Views: 1314

Answers (2)

Juan C. V.
Juan C. V.

Reputation: 637

Maybe JQuery scroll or animation functions have some problems in mobile devices.

Try using pure JS, instead 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>

Upvotes: 0

Mohamed Abdelaziz
Mohamed Abdelaziz

Reputation: 1

I used code like this in one of my projects and it works, try to modify your code like below:

$(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);

    });
});

Upvotes: -1

Related Questions