Question

我一直在环顾四周，我觉得我已经非常接近了，但是当我移动我的滑块以改变动画的速度时，似乎没有任何事情发生。我假设这与已经在进行的动画有关？这是我到目前为止的代码：

<html>
<head>
<script src="jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

function pageScroll(speed)
{
    $("html, body").animate({ scrollTop: $(document).height() }, speed);    
}
</script>
</head>
<body>
<body onLoad="pageScroll(100000);">

<input onChange="pageScroll(this.value);" type="range" value="100000" name="slider" min="0" max="200000"  style="position:fixed; left:0;top:0">

<center><img src="page-0.jpg" width="800">
<img src="page-1.jpg" width="800">
<img src="page-2.jpg" width="800">
<img src="page-3.jpg" width="800"></center>

</body>
</html>

Answer 1

请删除代码的这些部分<body onLoad="pageScroll(100000);">

你的代码中有2个身体标签...这不好......

如果你想做某事，当你的页面被加载时，那么在JS中使用jQuery的帮助 - ＆gt;

$(function() {
    /* things to do, after the page is loaded */
    pageScroll(100000);
});

要更改动画，请使用.stop（）。它打破了队列中的所有动画。有关详细信息，请参阅API docs

function pageScroll(speed) {
    $("html,body").stop().animate({ scrollTop: 119}, 500 );
}

我不确定，但我认为我对这个选择器有一些问题...如果它不起作用，试试这个选择器：

$("html:not(:animated),body:not(:animated)")

Answer 2

你可以这样做：

http://jsfiddle.net/ASMITH/AECva/

<input id="slider" type="range" value="10000" name="slider" min="100" max="20000"     style="position:fixed; left:0;top:0"></input>

$(document).ready(function () {
var vHeight = $('body').height();
$('#slider').change(function () {
    var speed = $('#slider').val();
    $('body').stop().animate({
        scrollTop: vHeight
    }, +speed);
});

}）;

jQuery自动页面滚动，带有HTML滑块以控制动画速度

2 个答案: