Question

195

JavaScript scroll to div with animation

rated 0 times [ 196] [ 1] / answers: 1 / hits: 30618 / 11 Years ago, mon, october 21, 2013, 12:00:00

I have a PhoneGap application that when it opens an HTML page, I want it to scroll to a specific <div> element. So far I've been able to make it do that with this script using jQuery:

<script>

$(document).delegate('.ui-page', 'pageshow', function () {

     var offset = $(this).find('#timeindicatordiv').offset().top;

     setTimeout(function () {

        $.mobile.silentScroll(offset);

        }, 0);

     });

</script>

This only gives me a jump directly to the <div> which looks a bit choppy.

Is there any way to give this a smooth animation?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arthur

Add To Favorites

Follow

Total Points: 729

Total Questions: 107

Total Answers: 109

Location: China

Member since Mon, Aug 22, 2022

2 Years ago

arthur questions

1 Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) rollup vue package

Thu, Sep 2, 21, 00:00, 3 Years ago

1 Formik & Yup: How to validate if the provided date is eighteen years old?

Mon, Oct 19, 20, 00:00, 4 Years ago

1 Angular 9 how to use debouncetime for input change event (keyup)

Thu, Apr 30, 20, 00:00, 4 Years ago

1 Swiper and current page index

Wed, Feb 19, 20, 00:00, 4 Years ago

1 Google Maps API Billing not Enabled Error - Billing not open

Fri, Jan 10, 20, 00:00, 4 Years ago

View All

answered 11 Years ago rhett · Accepted Answer

You can do the following:

var scrollToElement = function(el, ms){

    var speed = (ms) ? ms : 600;

    $('html,body').animate({

        scrollTop: $(el).offset().top

    }, speed);

}



// specify id of element and optional scroll speed as arguments

scrollToElement('#timeindicatordiv', 600);

jsfiddle/example: http://jsfiddle.net/dtR34/4/