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的应用的更多相关文章

  1. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  2. MUI开发APP,scroll组件,运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

  3. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  4. offset、client、scroll开头的属性归纳总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...

  5. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  6. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  7. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  8. 【前端性能】高性能滚动 scroll 及页面渲染优化--转发

    本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...

  9. 由overflow-x:scroll产生的收获

    我们都知道float:left属性会让元素向左浮动,如果用一个div将几个左浮动的li包起来,是不是div的宽度被li撑得很长很长呢,代码: <!DOCTYPE html> <htm ...

  10. UGUI 之Scroll Rect 坑

    由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以 ...

随机推荐

  1. base64加解密字符串

    import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.IOExceptio ...

  2. 【Nginx】负载均衡-IP哈希策略剖析

    转自:江南烟雨 IP哈希初始化 IP哈希的初始化函数ngx_http_upstream_init_ip_hash(ngx_http_upstream_ip_hash_module.c): static ...

  3. shell脚本变量的参数

    https://stackoverflow.com/questions/5163144/what-are-the-special-dollar-sign-shell-variables mkdir f ...

  4. [VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

    Using Object Oriented Programming, OOP, style allows us to apply Inversion of Control, IoC, and more ...

  5. DOM 事件类

    DOM事件的级别: DOM级别一共可以分4个级别:DOM0级.DOM1级. DOM2级 .DOM3级.而DOM事件级别分为3个级别:DOM0级事件处理.DOM2级事件处理.DOM3级事件处理 1. D ...

  6. JavaScriptSerializer 序列号datatime时少了8小时

    有人说主要的因素是在于JSON格式不直接支持日期和时间. 简单一点处理办法是ToLocalTime()一下:dt = dt.ToLocalTime(); 参考http://blog.csdn.net/ ...

  7. Windows10、ARM开发板、VMware虚拟机同时连接Internet

    前段时间有人遇到一些网络连接问题,让我帮忙处理,他想让ARM开发板连接外网,可以连接网络数据库,同时保证自己的电脑可以上网. 本来说直接可以连接一个路由器,分配一个内网IP给ARM就可以了,但是当时那 ...

  8. 获取view宽高

    在oncreate()中利用view.getWidth()或是view.getHeiht()来获取view的宽和高,看似没有问题,其实他们去得值是0,并不是你想要的结果? 这是为什么呢? 在调用onc ...

  9. luogu 3371 【模板】单源最短路径

    我太菜了 今天才学会堆优化的dij #include<iostream> #include<cstdio> #include<algorithm> #include ...

  10. hdnoip2017

    T1: 小喵喵有 n 个小鱼干排成一列,其中第 i个小鱼干有两种属性,美味度 ai 和特殊度 bi 现在小喵喵要吃掉一些小鱼干,出于一些原因,小喵喵会吃掉连续的一段区间中的所有小鱼干. 如果吃掉了 [ ...