zoukankan      html  css  js  c++  java
  • 滚动页面

    点击按钮后,页面滚动。之前想给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>
    
  • 相关阅读:
    java-以月为单位,得到一年中某一个月份的范围
    计算两个时间段相差几个月(包含相差的哪些月份)
    单个进程最大线程数
    Dell PowerEdge R720内存安装原则
    Java [parms/options] range -b 100 -c 10 -i 100 -t 300 -s 180
    PhysicalDrive
    classpath和环境变量设置
    MySQL正则表达式
    MySQL模式匹配(LIKE VS REGEXP)
    ubuntu为什么没有/etc/inittab文件? 深究ubuntu的启动流程分析
  • 原文地址:https://www.cnblogs.com/janes/p/2251387.html
Copyright © 2011-2022 走看看