滚动页面

最新推荐文章于 2024-08-09 06:13:01 发布
最新推荐文章于 2024-08-09 06:13:01 发布
阅读量225 收藏
点赞数
文章标签： xhtml javascript c# ViewUI
原文链接：https://yq.aliyun.com/articles/564963
版权

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

weixin_33779515
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5单屏滚动页面案例,20个精巧走心的单页滚动网页设计案例
weixin_42299873的博客
06-05 5379
单页滚动也算是目前网页设计中一个独立的类别了，导航、菜单等网页元素的设计也有一套独特的手法。极简风的导航栏设计其实算不上太多，毕竟导航栏的部分应该是包罗万象并且常驻页面的。而汉堡菜单的存在让导航具备了更优秀的隐藏性，摆脱了滚动条、分页和复杂的下拉框，让页面更整洁，为视觉设计留下更大的空间，留住了用户。另外非常值得注意的一点是，即使导航设计足够隐蔽，用户也不会在页面间迷失，他们比我们设计时所设定的“...
页面滚动
weixin_30776545的博客
09-27 58
鼠标点到左边的哪种颜色的小矩形，自动滚动到哪一部分。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面滚动</title> <style> body{ m...
页面滚动的设计和实现
Funny_Man的博客
10-08 1218
Scroll Scroll只能包含一个子元素 所以,所有包含的内容要放入Scroll子元素当中. 子元素的高度必须大于Scroll的高度才能有滚动效果 所以,Scroll必须设置高度. 注:父元素没有高度会被子元素撑开
Selenium 滚动页面至元素可见的方法
09-17
在某些情况下，网页内容可能超出当前视口，这时就需要滚动页面以使特定元素变得可见。本文将深入探讨如何使用Selenium来实现这一功能。 首先，了解页面滚动的基本方法。在JavaScript中，我们可以使用`window....
jQuery滚动页面显示文章预览进度条代码
11-24
本文将详细介绍如何使用jQuery实现滚动页面显示文章预览进度条的功能。 首先，我们需要理解这个功能的基本原理。当用户滚动页面时，我们通过jQuery监听滚动事件，然后计算当前可视区域与整个文档的高度比例，这个...
jquery网页向导插件可自动滚动页面步骤引导操作
09-04
本主题将深入探讨“jQuery网页向导插件”及其如何实现自动滚动页面的步骤引导操作。这类插件通常用于创建用户友好的互动指南，帮助用户了解网站功能，提高用户体验。 首先，我们需要理解jQuery向导插件的基本概念。...
jQuery实现平滑滚动页面到指定锚点链接的方法
10-23
总结起来，jQuery实现平滑滚动页面到指定锚点链接的关键在于利用事件处理（`click`事件）、DOM操作（获取`href`属性）以及第三方插件提供的平滑滚动方法。这种方法能够提升用户体验，使页面导航更加流畅。同时，...
Scrolling各种样式的滚动页面特效代码
01-23
在网页设计中，滚动页面特效已经成为提升用户体验的重要手段。这些特效不仅能让用户在浏览网站时感受到视觉上的吸引力，还能引导用户自然地探索页面内容。"Scrolling各种样式的滚动页面特效代码"是一个集合，它包含...
htmL页面滚动显示特效动画
09-28
html滚动到可视区域显示隐藏特效动画，适合新手研究开发
wow页面滚动时展示效果
09-27
在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。 引入文件： <link rel="stylesheet" href="css/animate.min.css"> 页面初始化： new WOW().init();
html制作自动滚动,如何制作一个html滚动页面
weixin_27064845的博客
05-31 2238
body {background-image: url("https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");background-repeat: no-repeat;background-attachment: fixed;}.navbar {overflow: hidden;...
滚动页面，加载元素，实现逻辑
weixin_30952535的博客
12-13 130
1 <script> 2 $(function(){ 3 $(window).scroll(function () { //滚动触发 4 var scrollTop = $(this).scrollTop();//已滚动的高度 5 var windowHeight = $(this).heig...
原生JS实现页面平滑滚动
热门推荐
Jay的博客
01-27 1万+
前言 页面平滑滚动是网页一种常见的效果。那如何用原生的JS实现这也效果呢？ 原理 平滑滚动的原理其实很简单。无非就是让页面一种肉眼可见的速度从当前位置滚动到指定位置。故而，要实现平滑滚动效果，我们就要知道“起始位置”、“结束位置”以及“如何让页面从一个点到另一个点”。 获取起始位置和终点位置 想要获取起始位置和终点位置，那就必须确定参考点。在网页中，常用的参考点是页面左上角。（注意，我这里所要实现...
js实现页面滚动，菜单固定
HELLO WORLD
05-11 1万+
相信大家都遇到过滚动页面需要固定某些内容不跟随页面滚动而滚动的情况，以往项目中也比较多，一直没有分享，今天刚好有空，来做个小分享。 项目需求： 页面处于顶部时右侧“在线客服”静止不动 当页面往下滚动，右侧在线客服悬浮于顶部 页面滚动至最大高度时，右侧在线客服与左侧内容底部对齐，相对静止 思路： 页面处于顶部时只需右浮动即可，滚动超过本身高度时设置fixed使元素块可以固定悬...
让网页自动滚屏
iBreathe的专栏
04-30 6042
                                             让网页自动滚屏     陈莎网页自动滚屏分为页面中的滚动字幕和整个网页自动滚动，页面中的滚动字幕可以用在网页“公告版”或“最新新闻”等信息的发布，而整个网页自动滚动适合用户浏览一篇长达数十页的网文，免去了用户手动翻页的麻烦。下面介绍这两种技术的实现方法：一、页面中某块文
XHTML 简介
最新发布
lly202406的博客
08-09 408
XHTML作为一种基于XML的标记语言，曾在一段时间内成为网页内容的标准格式。它的严格语法规则和良好的兼容性为网页设计和开发带来了便利。然而，随着HTML5的崛起，XHTML逐渐淡出了人们的视野。尽管如此，XHTML在推动网页技术发展方面所做出的贡献仍然值得我们铭记。
如何滚动页面 oython
07-15
您可以使用 Selenium 的 `execute_script` 方法来执行 JavaScript 代码来滚动页面。以下是在 Python 中使用 Selenium 滚动页面的示例代码： ```python from selenium import webdriver from selenium.webdriver....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值