求1个在DIV中，点击头的按钮，横向滚动到最后的例子的问题

我想做1个在DIV内部点击开头的1个连接，然后横向滚动到最后，然后点击最后的连接横向滚动到前面的效果，类似于点击页面的底部，点击返回按钮，返回到页面顶端的效果类似。以下是code：求高手帮改下 ，我做的没效果：<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>    <script language="javascript" type="text/javascript">        function scrollToRight() {
            var divObj = document.getElementById("divContent");
            //无效的地方
            divObj.screenLeft = divObj.scrollWidth;
            window.event.returnValue = false;
        }
        function scrollToLeft() {
            window.scrollTo(0, 0);
            window.event.returnValue = false;
        }
    </script></head>
<body>
    <div style="width: 100%; overflow-y: scroll; overflow-x: scroll;" id="divContent">
        <table>
            <tr>
                <td>
                    <a href="#" onclick="scrollToRight();" style="width: 100px">到最后</a>
                </td>
                <td>
                    <input type="text" value="1" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="2" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="3" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="4" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="5" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="6" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="7" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="8" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="9" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="10" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="11" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="12" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="13" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="14" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="15" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="16" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="17" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="18" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="19" style="width: 200px" />
                </td>
                <td>
                    <input type="text" value="20" style="width: 200px" />
                </td>
                <td>
                    <a href="#" onclick="" style="width: 100px">返回</a>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

解决方案 »

  1.   

    LZ 试试
     function scrollToRight() {
                var divObj = document.getElementById("divContent");
              
                divObj.scrollLeft = divObj.scrollWidth;
                window.event.returnValue = false;
            }
     function scrollToLeft() {
                 var divObj = document.getElementById("divContent");
    divObj.scrollLeft=0;
                window.event.returnValue = false;
            }
      

  2.   

    JS对大神什么的牛人什么的来说太小儿科了  呵呵  上面的代码还可以加个渐移的效果 这样 感觉用户体验好一些  LZ加油