JS控制滚动条缓慢移动到底部有问题

Posted 2023-03-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS控制滚动条缓慢移动到底部有问题相关的知识，希望对你有一定的参考价值。

可以移动到底部，但是一直移动。到底部了还不停止。(大家可以往上拉滚动条试试)
这是代码，大家帮我改改.要直接能用的。修改JS下. 谢谢

<!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>
</head>
<script type="text/javascript">
var currentPosition2,timer2;
function GoBottom()
timer=setInterval("runBottom()",1);

function runBottom()
currentPosition2=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition2+=50;
if(currentPosition2<0)

window.scrollTo(0,currentPosition2);

else

window.scrollTo(0,0);
clearInterval(timer2);

</script>
<body>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">5</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">4</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">3</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">2</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">1</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">0</div>
<div id="back-up" onclick="GoBottom()" style="border:1px solid red;height:100px;width:15px;position:fixed;cursor:pointer;right:10px;bottom:30px;">返回底部</div>

</body>
哪位大神能帮我解决啊.

http://yunpan.cn/cy6R5f26YzAyT 提取码 61e7

考虑IE6的话就比较简单，到了之后将这个div的position设置为fixed就好了top值是固定的\r\n但是如果要考虑IE6的话就麻烦一点，解决方法是有的但是代价过高，因为IE6不支持fixed这个属性你只能通过absolute来处理而此时top值是要不停地改变的，而且在IE6中这个div在滚动时会不停晃动，判断一下是否到底部追问

恩,IE6是不兼容.
不过我已经找到了解决方法.
写一个判断看你用的浏览器版本.
低版本的浏览器（比如IE6）进入网站会弹出一个框.无法使用。
然后给你一个链接地址去下载最新的浏览器.
啊哈哈. 不过貌似这样用户体验不太好...

谢谢你的建议.

参考技术A <!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>SCROLL</title>
<style type="text/css">
</style>
<script type="text/javascript">
var goToWhere = function (where)

    var me = this;
    me.site = [];
    me.sleep = me.sleep ? me.sleep : 16;
    me.fx = me.fx ? me.fx : 6;
    clearInterval (me.interval);
    var dh = document.documentElement.scrollHeight || document.body.scrollHeight;
    var height = !!where ? dh : 0;
    me.interval = setInterval (function ()

    var top = document.documentElement.scrollTop || document.body.scrollTop;
    var speed = (height - top) / me.fx;
    if (speed === me.site[0])

    window.scrollTo (0, height);
    clearInterval (me.interval);

    window.scrollBy (0, speed);
    me.site.unshift (speed);
    , me.sleep);
    ;
</script>
</head>
<body>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">5</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">4</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">3</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">2</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">1</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">0</div>
<div id="back-up" onclick="goToWhere(0)"
style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回顶部</div>
<div id="back-up" onclick="goToWhere(1)"
style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div>
</body>
</html>

参考技术B timer=setInterval("runBottom()",1);

clearInterval(timer2);
这个清除的名称不对吧

jquery 滚动条到底部执行方法问题.

js: $("tr:eq(2)").nextAll().hide();//首先将前面三个tr默认显示
然后当滚动条到底部后如何把第44444，55555，66666显示，如此类推。。。。。

<table>
<tr><td>111111</td></tr>
<tr><td>22222</td></tr>
<tr><td>33333</td></tr>
<tr><td>44444</td></tr>
<tr><td>55555</td></tr>
<tr><td>66666</td></tr>
<tr><td>77777</td></tr>
<tr><td>88888</td></tr>

</table>

参考技术A 给你个思路：
1、获取滚动事件；
2、判断隐藏掉的第一个tr与它所在的索引；
3、计算第一个隐藏的tr离窗口顶部的距离；
4、当计算到的距离小于某个值(PS:此值自定义)时显示此隐藏tr及其后的另外两个tr

具体实现：
$(function()
$("table tr:gt(2)").hide();
$(window).scroll(function()
var firstHideTr = $("tr:hidden:first"); //隐藏掉的表格第一行
var index = $("table tr").index(firstHideTr); //判断隐藏掉的表格第一行所在的索引值
if(firstHideTr.length>0 && ((firstHideTr.prev("tr").offset().top-$(window).scrollTop())<300))//此值300为自定义，根据实际情况而定
for(var i=0;i<3;i++)//3为滚动时显示的行数，可根据实际去定义
$("table tr").eq(index+i).show()

);
);本回答被提问者采纳参考技术B 你可以参考下淘宝图片下拉显示的效果

以上是关于JS控制滚动条缓慢移动到底部有问题的主要内容，如果未能解决你的问题，请参考以下文章

Selenium WebDriver如何使滚动条滚动到最元素位置

js控制滚动条滚动指定距离

如何用js控件div的滚动条，让它在内容更新时自动滚到底部？

如何通过JQuery将DIV的滚动条滚动到指定的位置

Selenium WebDriver如何使滚动条滚动到最元素位置

如何在DataGrid里面产生滚动条而不滚动题头

JS控制滚动条缓慢移动到底部 有问题

jquery 滚动条到底部执行方法问题.

JS控制滚动条缓慢移动到底部有问题