[英]JavaScript scroll to div with animation
我有一個PhoneGap應用程序,當它打開一個HTML頁面時,我希望它滾動到一個特定的<div>
元素。 到目前為止,我已經能夠使用jQuery使用這個腳本來做到這一點:
<script>
$(document).delegate('.ui-page', 'pageshow', function () {
var offset = $(this).find('#timeindicatordiv').offset().top;
setTimeout(function () {
$.mobile.silentScroll(offset);
}, 0);
});
</script>
這只能讓我直接跳轉到<div>
,看起來有些不穩定。
有沒有辦法給這個平滑的動畫?
您可以執行以下操作:
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/
像這樣做:
$("html,body").animate({scrollTop: offset}, 600);
$('.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.