由于公司专用浏览器控件，浏览器全屏显示，没有滚动条，只好做个使用按钮控制页面滚动，按钮必须有悬浮的效果，不能随页面滚动而滚动，不然滚到屏幕里面就没得点了，元素选择使用jQuery。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>悬浮按钮控制页面滚动</title>
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="./styles.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
$(function(){
$("#downButton").click(function(){
window.scrollBy(0,100);//使用javascript控制，没有使用jquery控制
});
$("#upButton").click(function(){
window.scrollBy(0,-100);
});
$("#downText").click(function(){
window.scrollBy(0,100);
});
$("#upText").click(function(){
window.scrollBy(0,-100);
});
for (var i=0;i<100 ;i++ ){
$("<h1>"+i+"</h1>").appendTo("#show");
}
});
</script>
</head>
<body>
<h1 id="downText"
style="position:absolute;left:200px;top:expression(parseInt(document.body.scrollTop)+250);">
鼠标点击文字下滑
</h1>
<h1 id="upText"
style="position:absolute;left:200px;top:expression(parseInt(document.body.scrollTop)+350);">
鼠标点击文字上滑
</h1>
<div id="show" />
</body>
</html>
分享到：
相关推荐
- 在滚动事件处理函数中，计算当前滚动位置与页面总高度的关系，更新楼层跳转按钮的样式和滚动百分比指示器。 - 使用`$('a').click()`监听导航链接的点击事件，阻止默认行为并使用`$('html, body').animate()`平滑...
这个功能可以通过监听滚动事件来实现，当页面滚动到一定位置时，显示返回顶部按钮；当点击按钮时，使用`$('html, body').animate({ scrollTop: 0 }, speed)`方法，让页面平滑地滚动到顶部。 4. **动画效果**： ...
这个代码示例中，使用jQuery创建了一个在页面滚动时会出现在右侧的返回顶部按钮。当用户滚动页面一定距离后，按钮将显示出来，点击则页面瞬间回到顶部。 实现这个功能的核心代码可能包括以下部分： 1. 首先，你...
jQuery右侧悬浮提示导航是一种常见的网页交互设计，它利用jQuery库的高效性和灵活性，为用户提供方便的侧边栏提示信息。这种导航通常出现在页面的右侧，随着用户滚动页面而始终保持可见，以便用户随时获取或访问相关...
jQuery右端悬浮带返回顶部代码是一种常见的网页交互设计，它通常出现在页面滚动时，一个固定在屏幕右侧的小图标（如箭头或按钮）会显示出来，用户点击后页面会迅速滚动回顶部。这个功能可以提升用户体验，特别是对于...
这篇文章将深入探讨“jQuery网页右侧固定悬浮层qq在线客服，服务热线，扫一扫二维码，购物车、页面滚动返回顶部代码”这一主题。这个项目利用了jQuery、CSS3和HTML三种技术，构建了一个实用的网页交互功能模块，适用...
2. **服务热线**：在网页中嵌入服务热线，可能是通过在客服悬浮按钮上显示电话号码，或者弹出一个包含电话号码的小窗口。这可以通过jQuery选择器定位元素，然后修改元素的文本内容或者添加事件监听来实现。 3. **扫...
悬浮图标通常被设计为页面的一个固定元素，无论用户滚动页面到何处，它都会始终位于屏幕的右下角。这种设计增强了用户的可发现性，使得导航始终触手可及。在HTML中，可以使用`position: fixed`属性实现这一效果。 #...
这篇文章将详细解析"jQuery右侧悬浮购物车清单代码.zip"中的技术知识点，主要涉及JavaScript库jQuery、前端布局和交互设计。 首先，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和...
在本案例中，jQuery被用来监听页面滚动事件、控制按钮的显示和隐藏，以及处理与在线客服系统的交互。 2. **返回顶部功能**：当用户在浏览长页面时，页面滚动到一定位置，会显示一个“返回顶部”的按钮。这个按钮...
通过jQuery，我们可以轻松地实现鼠标悬停显示二维码，以及页面滚动时显示返回顶部按钮的效果。在实际项目中，根据具体需求，你可能还需要处理更多细节，如调整元素的样式、优化动画效果等。在提供的压缩文件`texiao...
这里的CSS（Cascading Style Sheets）样式表用于控制页面的布局和视觉效果。为了实现侧边悬浮，我们需要定义客服菜单的定位属性，如`position: fixed`使其相对于浏览器窗口固定，`right: 0`或`left: 0`将其放置在...
在这个项目中，jQuery被用来监听滚动事件，当用户向下滚动页面时，悬浮的返回顶部按钮会显示出来；当用户向上滚动时，按钮则隐藏。此外，点击这个按钮，页面会平滑地滚动到顶部，提升用户的浏览体验。 其次，...
2. **侧边悬浮**：侧边悬浮菜单常用于网站的右下角或左下角，始终可见，不论用户滚动页面到哪个位置。这种设计使得用户可以随时点击打开客服对话框，提高了交互性和响应性。 3. **客服菜单**：这个菜单可能包含一个...
"jQuery侧边固定悬浮导航"是一种常见的网页交互设计技术，它将导航栏设置在页面的侧边，并在用户滚动页面时始终保持固定在屏幕的某个位置，提供持续的导航功能。这种设计模式提升了用户体验，特别是在内容丰富的长...
在网页设计中，当页面内容较长时，为了方便用户快速返回页面顶部，通常会添加一个返回顶部的悬浮按钮。本文将深入解析一个基于jQuery实现的高效、炫酷的返回顶部插件。该插件代码简洁，运行流畅，非常适合应用于各种...
1. **CSS样式**：创建一个在页面右侧悬浮的客服按钮，可以是图标或文字，需要设定适当的定位（通常使用fixed定位）和样式，使其在页面滚动时始终保持在可视范围内。 2. **jQuery事件监听**：使用`.click()`方法监听...
"威锋商城右侧jQuery悬浮菜单"是一个专门针对此类需求设计的JS特效，它能实现在页面滚动时始终保持在屏幕右侧可见，提供连续的导航体验。 首先，jQuery是一个轻量级的JavaScript库，它极大地简化了DOM操作、事件...
而jQuery底部第三方登录按钮悬浮条就是这样一个实用的特效，它将这些第三方登录选项以悬浮条的形式呈现，始终保持在页面底部，方便用户随时点击。本文将详细介绍这一特效的实现原理与应用。 首先，jQuery作为一款轻...
《jQuery右侧悬浮返回顶部与分享按钮的实现》 在网页设计中，为了提供更好的用户体验，通常会在页面右侧设置悬浮的返回顶部按钮以及分享按钮。这些功能的实现往往依赖于JavaScript库，尤其是jQuery，它以其简洁易用...