javascript之使用 javascript 滚动 HTML 页面_编程设计

我创建了一个通过 JavaScript 滚动的页面，但在某些浏览器中，当您向该页面发送文本时，它不会非常流畅地滚动？而且它似乎在 chrome 中根本不起作用。

我的问题是:
使用跨浏览器的 JavaScript 创建平滑滚动 html 页面的最佳方法是什么。

为了了解我正在尝试做什么，这是我制作的测试页。

<!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 id="Head1"> 
<title>test</title> 
    <style type="text/css"> 
        html 
        { 
            overflow:hidden; 
        } 
        #fixedtop 
        { 
            padding:1%; 
            position:fixed; 
            float:left; 
            vertical-align:middle; 
        } 
        table.scollTable td 
    { 
        background-color:Gray; 
        height:12px; 
        width:12px; 
    } 
    table.scollTable td:hover 
    { 
        background-color:Lime; 
        height:20px; 
        width:20px; 
    } 
        .container 
        { 
            background:url(http://sstatic.net/so/img/logo.png) repeat; 
            height:5000px; 
            width:5000px; 
        } 
    </style> 
</head> 
<body> 
    <form name="form1" method="post" action="TestPage.aspx" id="form1"> 
<div> 
</script> 
  
    <div id="fixedtop"> 
        <table class="scollTable" border="0" cellpadding="0" cellspacing="0"> 
            <tr> 
                <td onmouseover="scroll(-20,-20,this)"></td> 
                <td onmouseover="scroll(-10,-20,this)"></td> 
                <td onmouseover="scroll(0,-20,this)"></td> 
                <td onmouseover="scroll(10,-20,this)"></td> 
                <td onmouseover="scroll(20,-20,this)"></td> 
            </tr> 
            <tr> 
                <td onmouseover="scroll(-20,-10,this)"></td> 
                <td onmouseover="scroll(-10,-10,this)"></td> 
                <td onmouseover="scroll(0,-10,this)"></td> 
                <td onmouseover="scroll(10,-10,this)"></td> 
                <td onmouseover="scroll(20,-10,this)"></td> 
            </tr> 
            <tr> 
                <td onmouseover="scroll(-20,0,this)"></td> 
                <td onmouseover="scroll(-10,0,this)"></td> 
                <td></td> 
                <td onmouseover="scroll(10,0,this)"></td> 
                <td onmouseover="scroll(20,0,this)"></td> 
            </tr> 
            <tr> 
                <td onmouseover="scroll(-10,10,this)"></td> 
                <td onmouseover="scroll(-10,10,this)"></td> 
                <td onmouseover="scroll(0,10,this)"></td> 
                <td onmouseover="scroll(10,10,this)"></td> 
                <td onmouseover="scroll(10,10,this)"></td> 
            </tr> 
            <tr> 
                <td onmouseover="scroll(-20,20,this)"></td> 
                <td onmouseover="scroll(-10,20,this)"></td> 
                <td onmouseover="scroll(0,20,this)"></td> 
                <td onmouseover="scroll(10,20,this)"></td> 
                <td onmouseover="scroll(20,20,this)"></td> 
            </tr> 
        </table> 
    </div> 
     
    <div class="container"></div> 
</form> 
</body> 
</html> 
<script id="sTest" type="text/javascript" onload="test()">  
  
  
    function scroll(x,y, elem) { 
        var iScroll = setInterval( 
        function() { 
            SetScroll((x + GetXScroll()), (y + GetYScroll())) 
        }, 1); 
        elem.onmouseout = function() { clearInterval(iScroll) }; 
    } 
  
    function GetYScroll() { 
        return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; 
    } 
  
    function GetXScroll() { 
        return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft; 
    } 
  
    function SetScroll(x,y) { 
        if (document.body.scrollTop) { 
            document.body.scrollLeft = x; 
            document.body.scrollTop = y; 
        } 
        if(document.documentElement){ 
            document.documentElement.scrollLeft = x; 
            document.documentElement.scrollTop = y; 
        } 
        if (window.pageYOffset) { 
            try { 
                window.pageXOffset = x; 
                window.pageYOffset = y; 
            } catch (e) { } 
        } 
    } 
</script>

请您参考如下方法:

尝试使用 window.scrollBy进行滚动。

我赞成 Evan 使用图书馆的想法——没有图书馆，你只会浪费很多时间。 jQuery 只是一种选择，最佳选择取决于您在做什么。

还有一件事:我注意到您尝试使用 XHTML。请注意，如果正确完成(包括 HTTP header 等)，Internet Explorer 无法能够显示 XHTML。在其他标准得到广泛支持之前，我建议严格使用 HTML 4.01。无论如何，您将无法跨浏览器使用 XHTML 的优势。