点击按钮后,页面滚动。之前想给Li的click事件添加效果,点击后页面向上滚动,总是没反应。后来发现是Li里面多了个<a href=’#’></a>导致的。不过scrollBy方法之前还真没用过,记录一下。谢谢博问上s似水流年 的指点 。
<script type="text/javascript">
$(document).ready(function () {
$('#btnScroll').click(function () {
window.scrollBy(0, 200);
});
});
</script>
![image image](https://images.cnblogs.com/cnblogs_com/janes/201111/201111161621465173.png)
测试代码:
<%@ 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>
作者:陈敬(公众号:敬YES)
出处:http://www.cnblogs.com/janes/
博客文章仅供交流学习,请勿用于商业用途。如需转载,请务必注明出处。