滚动页面

简介:

点击按钮后,页面滚动。之前想给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,如需转载请自行联系原作者

相关文章
|
6月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
12月前
|
小程序 前端开发 容器
微信小程序隐藏右侧滚动条并可以滚动
微信小程序隐藏右侧滚动条并可以滚动
461 0
|
4月前
|
JavaScript
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
109 1
|
4月前
|
JavaScript
vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
114 1
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
68 0
|
6月前
|
JavaScript 前端开发 容器
随着页面的滚动导航条跟着滚动
随着页面的滚动导航条跟着滚动
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
|
6月前
|
小程序
小程序页面左右滑动
小程序页面左右滑动
245 0
|
JavaScript
js监听页面或元素scroll事件,滚动到底部或顶部
js监听页面或元素scroll事件,滚动到底部或顶部
1240 0
js监听页面或元素scroll事件,滚动到底部或顶部