JS控制滚动条缓慢移动到底部 有问题 问了好多次了
发布网友
发布时间:2022-05-02 11:25
我来回答
共2个回答
热心网友
时间:2022-04-22 18:40
用JQuery写吧,引入内库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>底部按钮有问题</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$('.top').click(function(){
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
);
$('.bottom').click(function(){
$('html, body').animate({ scrollTop: $('html body').height()}, 'slow');
}
);
});
</script>
<body>
<div id="back-up" class="top" onclick="GoTop()" style="border:1px solid red;height:100px;width:15px;position:fixed;cursor:pointer;right:10px;top:30px;">返回顶部</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">饭</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">吃</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">家</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">回</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">你</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">带</div>
<div id="back-up" class="bottom" onclick="GoBottom()" style="border:1px solid red;height:100px;width:15px;position:fixed;cursor:pointer;right:10px;bottom:30px;">返回底部</div>
</body>
</html>
热心网友
时间:2022-04-22 19:58
用js控制滚动
<link rel="stylesheet" href="css/Up_style.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrollToTop.min.js"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop(1000);
});
</script>
<a href="#top" id="toTop"></a>追问要缓慢向下的效果
追答$("#toTop").scrollToTop(1000);
把top改成下不就可以了