最近做一个项目前端要用到scrollTo和滚动视觉差。顺便把两个东西拿出来温习一下。

HTML DOM里面定义了scrollTo方法,用法:scrollTo(xpos,ypos),把内容滚动到当前的指定位置。但是这个充其量只能说是移动而不能说是滚动,似乎没有滑动的效果显示出来。好在JQuery提供了足够多方便的插件,其中一个就能够提供平滑滚动的功能,是平滑哦~

插件叫做jquery.scrollTo.js,当然前提是首先包含jquery的库。而且它自己里面已经封装的很好了,只需要简单的调用作用在标签上的函数就能够实现平滑的滚动,用起来非常的简便。就像下面这样:

  1. $(function(){
  2. $(".nav_pro").click(function(){
  3. $.scrollTo('#pro',500);
  4. });
  5. $(".nav_news").click(function(){
  6. $.scrollTo('#news',800);
  7. });
  8. $(".nav_ser").click(function(){
  9. $.scrollTo('#ser',1000);
  10. });
  11. $(".nav_con").click(function(){
  12. $.scrollTo('#con',1200);
  13. });
  14. $(".nav_job").click(function(){
  15. $.scrollTo('#job',1500);
  16. });
  17. });
scrollTo的两个参数一个定义要滚动的元素对象,另一个是滚动所持续的时间,以毫秒计算。
平滑滚动只是这个插件可以实现的一个最基本的方法,可以考虑在这基础上继续去做其他的应用,比如展示文档,模拟PPT效果等等。

scrollTo和scrollTo.js的更多相关文章

  1. JS 相关记录(scrollTo,JSON)

    1. window.scrollTo window.scrollTo 有2种语法,比较常见的时候 window.scrollTo(x-coord,y-coord ),其中 x轴坐标与y坐标 第二种为 ...

  2. JS控制div跳转到指定的位置的解决方案总结

    总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...

  3. jquery.pjax.js bug问题解决集锦

    jquery.pjax 是一个很好的局部刷新插件,但实际应用过程是还是会有很多小问题,部分问题解决如下: 1.pjax 局部加载时候,IE 存在缓存问题,很容易理解,pjax是通过jquery的aja ...

  4. js判断浏览器类型和版本

    原网址:http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html 除了另无它法,肯定不使用navigator.userAgen ...

  5. 2.21 JS处理滚动条

    2.21 JS处理滚动条 前言    selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了.常见场景:当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到 ...

  6. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  7. auto scroll bottom in js

    auto scroll bottom in js autoScrollToBottom() { let box = document.querySelector(`[data-dom="ch ...

  8. scroll js 原生

    1.当前位置滚动: document.documentElement.scrollTop 当前位置: 有可能是0 window.scrollTo(,document.documentElement.s ...

  9. scrollTo & js auto scroll & scrollX & scrollY

    scrollTo & js auto scroll & scrollX & scrollY scrollX & scrollY 获取 scroll top height ...

随机推荐

  1. URLConnection的连接、超时、关闭用法总结

    Java中可以使用HttpURLConnection来请求WEB资源. 1. URL请求的类别 分为二类,GET与POST请求.二者的区别在于:      a:) get请求可以获取静态页面,也可以把 ...

  2. [CSAPP笔记][第一章计算机系统漫游]

    计算机系统漫游 我们通过追踪hello程序的生命周期来开始对系统的学习—–从它被程序员创建,到系统上运行,输出简单的消息,然后终止.我们沿着这个程序的生命周期,简要介绍一些逐步出现的概念,专业术语和组 ...

  3. HTML入门基础

    前言:学了一段时间的前端,一直没有写博客的习惯,趁着最近学校组织的实训,把知识重新梳理一遍.知识点大部分来自老师上课学习笔记. 1.HTML是什么? HTML 是用来描述网页的一种标记语言. 1)HT ...

  4. oracle 经典语句集合

    1.一列转多行 方法一: select a.id,  substr(','||a.name||',',instr(','||a.name,',',1,b.rn)+1,    instr(a.name| ...

  5. 关于Ajax技术中servlet末尾的输出流

    Ajax的服务器端用PrintWriter out=resp.getWriter()来响应数据的时候,out.print(0).out.print(1)来表示成功或失败,而不用out.write是有原 ...

  6. (原)ubuntu16中编译boost1.61.0库

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5797940.html 参考网址: http://www.boost.org/doc/libs/1_61 ...

  7. javascript 数组学习(一)

    今天学习了一下<javascript权威指南(第6版)>的第七章:数组 一.数组的创建: 数组的创建有3种方法: var colors = new Array(3);//可以省略new v ...

  8. full-background.js

    $(window).on('load', function () { $(window).trigger('resize'); }); $(function () { var $window = $( ...

  9. ubuntu studio

    相对于普通的的Ubuntu Linux而言,Ubuntu Studio更适合于多媒体设计人员,也就是说Ubuntu Studio更适合经常搞图片和电脑音乐的Linux爱好者们. Ubuntu Stud ...

  10. mysql在linux上重启

    如何启动/停止/重启MySQL 一.启动方式 1.使用 service 启动:service mysqld start 2.使用 mysqld 脚本启动:/etc/inint.d/mysqld sta ...