scroll的应用
jQuery(document).ready(function($){
$('#shang').click(function(){
$('html,body').animate({scrollTop: '0px'}, 800);
});
$('#comt').click(function(){
$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);
});
$('#xia').click(function(){
$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);
});
});
表示点击相关ID移动到指定位置:
点击ID为shang的元素,回到顶部;
点击ID为comt的元素,回到ID为comments的位置;
点击ID为xia的元素,回到底部;
scroll的应用的更多相关文章
- 【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- MUI开发APP,scroll组件,运用到区域滚动
最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部. 头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
- mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化--转发
本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...
- 由overflow-x:scroll产生的收获
我们都知道float:left属性会让元素向左浮动,如果用一个div将几个左浮动的li包起来,是不是div的宽度被li撑得很长很长呢,代码: <!DOCTYPE html> <htm ...
- UGUI 之Scroll Rect 坑
由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以 ...
随机推荐
- Java随机生成常用汉字验证码
原文:http://www.open-open.com/code/view/1422514803970 import java.awt.Color; import java.awt.Font; imp ...
- 子元素设置margin-top,父元素也受影响
这个问题困惑了非常久.尽管没有大碍早就摸出来怎么搞定它.但始终不明确原因出在哪里,假设仅仅是IE有问题我也不会太在意.可问题是全部上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事, ...
- Tutorial: Synchronizing State with Mutexes in Go
go语言中用mutex实现状态同步. 原文:https://kylewbanks.com/blog/tutorial-synchronizing-state-with-mutexes-golang - ...
- DirectX11 学习笔记7 - 支持自由移动的摄像机
如今将又一次制定一个camera摄像机.能够自由移动. 比方前进 后退,上游 下潜. 各个方向渲染之类的. 首先设置按键. 这个时候须要在 XWindow.h 里面 bool XWindow::fra ...
- jquery.validate自己定义验证--成功提示与择要提示
1. 自己定义验证--成功提示 1) 加入选项 errorClass: "unchecked". validClass: "checked", errorEle ...
- php与国付宝对接过程吐槽
最近.我们在打造全国第一家互联网+风险管理平台(避险谷)时.须要与第三方支付平台"国付宝"进行在线交易对接. 之前对接过支付宝 .感觉还非常easy,拿到国付宝的接口文档.我晕啊. ...
- java图片处理工具之-ImageMagick+jmagick(二)
简单的图片处理測试类: public class ImageUtil { static{ System.setProperty("jmagick.systemclassl ...
- 【Dairy】2016.10.24 - made 嘲讽垃圾
//这个还找不到我的博客,但在看到原文 //这个还找不到我的博客,但在看到原文 //这个还找不到我的博客,但在看到原文 //这个还在我前面,访问多 一波嘲讽,woc 今天百度一下文章,发现有一篇和我一 ...
- linux CentOS中创建用户 无密码登录
首先点击左上角的 “应用程序” -> “系统工具” -> “终端”,首先在终端中输入 su ,按回车,输入 root 密码以 root 用户登录,接着执行命令创建新用户 hadoop: 接 ...
- python-----opencv读视频、循环读图片显示进度条
功能:opencv读视频,显示进度条,推动进度条快进.后退,按q退出.代码如下: import os import cv2 def nothing(emp): pass def jindu(name, ...