scrollTop()案例
设置 <div> 元素中滚动条的垂直偏移：
定义和用法
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{border: 1px solid gray;width: 200px;height: 200px;margin: 50px;overflow: auto}
</style>
</head>
<body>
<div>
刚才看了黄小平先生的一篇短文，一个内心有光的人，永远不会有黑夜。是啊，每天凌晨起床，在灯光下走到窗前，外面漆黑一片，也曾经试着走出去，可以360度的仰望着天空，即使隔着厚厚的云层，也能感受到夜空的美丽斑斓，就像一粒种子在黑暗的牢笼里，用生根发芽的信念，残破自己的身体一点一点的向上攀爬，当她顶开地表的最后一条缝，光明开始记录她绽放的生命，不论是树活千年，还是花开数天，最初她们都经历过黑暗。人生也是这样，只要心里充满对光明的渴望，至少你是温暖的！许多小语——心里的光就是梦起飞的地方，飞行的过程就是目标中的理想！
</div>
<button class="settings">把scrollTop设置100px</button>
<button class="gettop">获取当前scrollTop</button>
<script type="text/javascript" src="js/jquery-1-8-3.js"></script>
<script type="text/javascript">
(function($){
$(".settings").click(function(){
$("div").scrollTop(100);
});
$(".gettop").click(function(){
console.log($("div").scrollTop() + "px");
});
console.log($(".settings").offset());
})(jQuery);
</script>
</body>
</html>
scrollTop()案例的更多相关文章
- JQuery DOM操作（属性操作/样式操作/文档过滤）
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- 关于小程序 scroll-view中设置scroll-top无效 和小说图书阅读进度条小案例
在最近的项目有做到关于小说阅读的进度条功能,其中用到scroll-view和slider组件,发现scroll-view中的scroll-top在设置值后无效,出现这种情况大概是以下几种问题: 1.s ...
- JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）
点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- Bootstrap 快速人门案例——前端最火的插件
今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要.同时,我们可以快速完成开发任务,减少发开周期,有不对的地方望大家指正. 如果你想走的更 ...
- 用jquery实现瀑布流案例
一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据 ...
- 用scrollTop制作一个自动滚动公告栏
我们在浏览网页时,经常会看到会一些滚动的栏目,比如向上滚动的公告.新闻等.其实他们的制作都不难,只要学了基础的html.css.javascript就可以做出来,用JavaScript的scrollT ...
- python 学习笔记十四 jQuery案例详解（进阶篇）
1.选择器和筛选器 案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...
- 一步一步学习SignalR进行实时通信_6_案例
原文:一步一步学习SignalR进行实时通信_6_案例 一步一步学习SignalR进行实时通信\_6_案例1 一步一步学习SignalR进行实时通信_6_案例1 前言 类的定义 各块功能 后台 上线 ...
随机推荐
- WPF MVVM从入门到精通3：数据绑定
原文:WPF MVVM从入门到精通3:数据绑定 WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通3:数据绑定 WPF ...
- BZOJ1208_宠物收养所_KEY
题目传送门 平衡树的题. 因为题目给出条件(其实自己也知道):同一时间呆在收养所中的,要么全是宠物,要么全是领养者,这些宠物和领养者的个数不会超过10000个. 所以只要维护一颗平衡树,它的里面要不全 ...
- [BZOJ4444][SCOI2015]国旗计划-[ST表]
Description 传送门 Solution 说真的这道题在场上没做出来的我必定是脑子有洞.. 我们用st表记录以某个位置开始,派了1<<j个战士能到达的最远位置. 由于边境线是一圈, ...
- QStackedWidget 与 QStackedLayout 的用法区别
import sys from PyQt5 import QtWidgets, QtCore class MyWidget(QtWidgets.QWidget): def __init__(self, ...
- 译图智讯VIN码识别助力汽配商转型升级
汽配猫是上海佳驰经合能源科技有限公司自主开发的汽车配件B2B网上商城及服务平台,该平台依托互联网云技术.利用创新的商业模式及互联网思维,整合汽配产业链优秀资源,为汽车维修保养企业等产业链各方面提供汽配 ...
- Linux工作管理
工作管理? 其实也就是把程序放到后台来管理,在windows中也就是最小化,在Linux中是通过命令把程序放到后台中.jobs命令查看后台程序. 对于第一点注意事项,mysql启动是例外的,要是叉掉了 ...
- dubbo 微服务
# spring-dubbo-service 微服务 项目地址:https://github.com/windwant/spring-dubbo-service spring dubbo servic ...
- 后台程序获取JPG/GIF/PNG图片宽度、高度
这是很久之前编写的代码,该代码是读取流数据指定位置的内容,获取图片的宽度.高度值. 由于系统更新,这些代码丢之不用,在这里存个档吧! 1. 获取gif图片宽度.高度.(binary_是图片流数据) ' ...
- win2003系统网络安装——基于linux+pxe+dhcp+tftp+samba+ris
原文发表于:2010-09-16 转载至cu于:2012-07-21 一．原理简介 PXE(preboot execute environment)工作于Client/Server的网络模式,支持工作 ...
- 如何使用phpredis连接Redis的方法
本文跟大家介绍使用同一VPC内弹性云服务器ECS上的phpredis连接Redis的方法. 更多的客户端的使用方法,请参考https://redis.io/clients 前提条件 已成功申请Redi ...