滚动页面 - 敬YES

点击按钮后，页面滚动。之前想给Li的click事件添加效果，点击后页面向上滚动，总是没反应。后来发现是Li里面多了个<a href=’#’></a>导致的。不过scrollBy方法之前还真没用过，记录一下。谢谢博问上s似水流年的指点。

<script type="text/javascript">
        $(document).ready(function () {
            $('#btnScroll').click(function () {
                window.scrollBy(0, 200);
            });
        });
    </script>

测试代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!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 runat="server">
    <title></title>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    <script language="javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnScroll').click(function () {
                window.scrollBy(0, 200);
            });
        });
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" value="滚动" id="btnScroll" />
    <div id="test">
        <ul>
            <li>
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>1修改杀毒时间</span></li>
            <li>aa</li>
            <li>aa</li>
            <li>aa</li>
        </ul>
    </div>
    <div style="border: 0px; background: #a9dbfc;" id='divT01'>
        <ul>
            <li id='T0101'>
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>1修改杀毒时间</span>
                <br />
                <br />
                <br />
                <br />
            </li>
            <li id='T0102'><a href="#">
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>2修改杀毒时间</span>
                 <br />
                <br />
                <br />
                <br />
            </li>
            <li id='T0103'><a href="#">
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>3修改杀毒时间</span>
                 <br />
                <br />
                <br />
                <br />
           </li>
            <li id='T0104'><a href="#">
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>4修改杀毒时间</span>
                 <br />
                <br />
                <br />
                <br />
           </li>
            <li id='T0105'><a href="#">
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                 <br />
                <br />
                <br />
                <br />
           </li>
            <li id='Li1'><a href="#">
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                 <br />
                <br />
                <br />
                <br />
           </li>
            <li id='Li2'><a href="#">
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                 <br />
                <br />
                <br />
                <br />
           </li>
            <li id='Li3'><a href="#">
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                 <br />
                <br />
                <br />
                <br />
           </li>
            <li id='Li4'><a href="#">
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                 <br />
                <br />
                <br />
                <br />
           </li>
            <li id='Li5'><a href="#">
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                 <br />
                <br />
                <br />
                <br />
           </li>
            <li id='Li6'><a href="#">
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                 <br />
                <br />
                <br />
                <br />
           </li>
            <li id='Li7'><a href="#">
                <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                 <br />
                <br />
                <br />
                <br />
           </li>
        </ul>
    </div>
    </form>
</body>
</html>

posted on 2011-11-16 16:24 敬YES 阅读(788) 评论(1) 收藏举报

刷新页面返回顶部