滚动页面

简介:

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

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

 

image

测试代码:

<%@ 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>



本文转自 陈敬(Cathy) 博客园博客,原文链接:http://www.cnblogs.com/janes/archive/2011/11/16/2251387.html,如需转载请自行联系原作者

目录
打赏
0
0
0
0
347
分享
相关文章
|
9月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
1093 0
|
7月前
|
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
191 1
|
7月前
|
vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
162 1
|
7月前
|
vue【解决方案】页面/路由跳转后,滚动条消失,页面无法滚动
vue【解决方案】页面/路由跳转后,滚动条消失,页面无法滚动
231 0
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
91 0
随着页面的滚动导航条跟着滚动
随着页面的滚动导航条跟着滚动
js监听页面或元素scroll事件,滚动到底部或顶部
js监听页面或元素scroll事件,滚动到底部或顶部
1344 0
js监听页面或元素scroll事件,滚动到底部或顶部