web-dev-qa-db-ja.com

JavaScriptをアニメーションでdivにスクロール

HTMLページを開くときに特定の<div>要素にスクロールするPhoneGapアプリケーションがあります。これまでのところ、jQueryを使用してこのスクリプトでそれを行うことができました：

<script>
$(document).delegate('.ui-page', 'pageshow', function () {
     var offset = $(this).find('#timeindicatordiv').offset().top;
     setTimeout(function () {
        $.mobile.silentScroll(offset);
        }, 0);
     });
</script>

これは、少し途切れ途切れに見える<div>に直接ジャンプするだけです。

これをスムーズなアニメーションにする方法はありますか？

javascriptjqueryhtmlcordova
11
Luddig

次のことができます。

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/

25
kyle.stearns

このようにしてください：

$("html,body").animate({scrollTop: offset}, 600);
1
Nelson
$('.click').click(function(l){
   // prevent default action

   l.preventDefault();

   scrollToElement( $(this).attr('href'), 2000 );
});

var scrollToElement = function(el, ms){
    var speed = (ms) ? ms : 2000;
    $('html,body').animate({
        scrollTop: $(el).offset().top
    }, speed);
}
div {
    margin-top:1000px;
}
div:last-child {
    padding-bottom:1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#link1" class="click">link 1</a><br />
<a href="#link2" class="click">link 2</a><br />
<a href="#link3" class="click">link 3</a><br />


<div id="link1">Link 1</div>
<div id="link2">Link 2</div>
<div id="link3">Link 3</div>
0
Shrikant Gangamwar