scrollTop()案例

设置 <div> 元素中滚动条的垂直偏移:

定义和用法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         div{border: 1px solid gray;width: 200px;height: 200px;margin: 50px;overflow: auto}
 8     </style>
 9 </head>
10 <body>
11 <div>
12     刚才看了黄小平先生的一篇短文,一个内心有光的人,永远不会有黑夜。是啊,每天凌晨起床,在灯光下走到窗前,外面漆黑一片,也曾经试着走出去,可以360度的仰望着天空,即使隔着厚厚的云层,也能感受到夜空的美丽斑斓,就像一粒种子在黑暗的牢笼里,用生根发芽的信念,残破自己的身体一点一点的向上攀爬,当她顶开地表的最后一条缝,光明开始记录她绽放的生命,不论是树活千年,还是花开数天,最初她们都经历过黑暗。人生也是这样,只要心里充满对光明的渴望,至少你是温暖的!许多小语——心里的光就是梦起飞的地方,飞行的过程就是目标中的理想!
13 </div>
14 <button class="settings">把scrollTop设置100px</button>
15 <button class="gettop">获取当前scrollTop</button>
16 <script type="text/javascript" src="js/jquery-1-8-3.js"></script>
17 <script type="text/javascript">
18 (function($){
19     $(".settings").click(function(){
20         $("div").scrollTop(100);
21     });
22     $(".gettop").click(function(){
23         console.log($("div").scrollTop() + "px");
24     });
25     console.log($(".settings").offset());
26 })(jQuery);
27 </script>
28 </body>
29 </html>
时间: 2024-10-09 21:47:58

scrollTop()案例的相关文章

python 学习笔记十三 jQuery案例(进阶篇)

1.选择器和筛选器 案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> //定义css样式,自定义 .hide{ display: none; } .coating{ z-index: 1; opacity: 0.5; position: fix

用scrollTop制作一个滚动栏

我们在浏览网页时,经常会看到会一些滚动的栏目,比如向上滚动的公告.新闻等.其实他们的制作都不难,只要学了基础的html.css.javascript就可以做出来,用JavaScript的scrollTop就行. scrollTop:返回或设置匹配元素的滚动条的垂直位置. 1 <div id="div1" style="width:200px;height:200px;background-color:#999999;overflow:auto;background-co

Bootstrap 快速人门案例——前端最火的插件

今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要.同时,我们可以快速完成开发任务,减少发开周期,有不对的地方望大家指正. 如果你想走的更远,那么请勤劳一点,多看看代码,多多练习代码,如果你仔细研究代码,自己也可以写出一部分的css比较好的插件. 一.Bootstrap简介 详见官网: http://www.bootcss.com/ http://v3.bootcss.com/ 1.练习准备资源准备: 下载bootstrap资源: h

jQuery常用案例总结

模态对话框 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .field{ 8 z-index: 1; 9 } 10 .cover{ 11 display: none; 12 z-index: 2; 13 position:

50个实用的jquery案例

50个jquery案例 1. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“selected”(.selected)的子节点. .filter(":not(:has(.selected))") 2. 如何重用元素搜索 var allItems = $("div.item"); var keepList = $("

图片预加载 小案例

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content

jQuery Address全站 AJAX 完整案例详解

本文详细介绍如何利用 jQuery 框架以及 jQuery Address 插件实现最基本的全站 AJAX 动态加载页面内容的功能的方法. 案例目标 以常见基本结构的网站为案例,实现全站链接 AJAX 加载页面内容,不刷新页面,不影响seo/seo.html" target="_blank">搜索引擎收录.同时兼容 WordPress. 功能实现 需要提供给 jQuery Address 的有三个常量,分别是: 代码如下 复制代码 var baseurl = 'http

前端页面实现滚动加载数据的案例

1.我们在项目中经常会有这样的需求就是需要滚动加载数据: 2.原理利用分页的原理即可实现:见下面代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &l

浮动的瀑布流(案例:蘑菇街)

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>浮动的瀑布流(案例:蘑菇街).html</title> <style> *{margin:0;padding:0;} ul,li{list-style: none} #div1{width:695px;margin:20px auto;bord