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>
    
  • 相关阅读:
    msyql 死锁
    yii2 操作数据库
    yii2 加载静态资源
    Yii2 之 UrlManager 实践 (一)
    Wordpress 之 Rewrite Rules
    yii2 使用gii生成代码文件
    权限设计的杂谈
    NodeJS —— 自定义流的实现
    浅析递归
    请将你的App签名文件放进保险箱
  • 原文地址:https://www.cnblogs.com/janes/p/2251387.html
Copyright © 2011-2022 走看看