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>
    
  • 相关阅读:
    PCB Genesis加邮票孔(线与线)实现算法
    PCB 无需解压,直接读取Zip压缩包指定文件 实现方法
    PCB MS SQL CLR聚合函数(函数作用,调用顺序,调用次数) CLR说明
    PCB MS SQL表值函数与CLR 表值函数 (例:字符串分割转表)
    PCB MS CLR 聚合函数 joinString加排序实现
    PCB 奥宝LDI 输出自动改周期检测内容
    如何介绍项目
    二叉树的深度
    51单片机汇编指令手册
    SSM父子工程搭建
  • 原文地址:https://www.cnblogs.com/janes/p/2251387.html
Copyright © 2011-2022 走看看