最近做一个项目前端要用到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. UIImageView圆角,自适应图片宽高比例,图片拉伸,缩放比例和图片缩微图

    /*      设置圆角,通过layer中的cornerRadius和masksToBounds即可.            自适应图片宽高比例.通过UIViewContentModeScaleAsp ...

  2. [LeetCode] 034. Search for a Range (Medium) (C++/Java)

    索引:[LeetCode] Leetcode 题解索引 (C++/Java/Python/Sql) Github: https://github.com/illuz/leetcode 035. Sea ...

  3. 设置 git config 的一些默认配置

    设置 git status的颜色. git config --global color.status auto 一.Git已经在你的系统中了,你会做一些事情来客户化你的Git环境.你只需要做这些设置一 ...

  4. HTTP协议报文格式

    HTTP协议报文格式 接下来我们看看HTTP协议(Hypertext Transfer Protocol――超文本传输协议)浏览器端(客户端)向WEB服务器端访问页面的过程和HTTP协议报文的格式. ...

  5. Hacker(12)----个人计算机安全防护策略

    了解了黑客的常用入侵方法,针对这些方法分别指定对应的防护策略不太现实,因此用户只能掌握个人计算机安全的常见防护策略,以确保计算机处在一个相对安全的环境中.常见个人计算机防护策略有:安装并及时升级杀毒软 ...

  6. .Net+EF连接Oracle 10、11 开发,ODAC安装配置与使用详解

    Oracle数据访问组件 (ODAC)  全称:Oracle Data Access Components 优点:由于微软在.net framework4中会将System.Data.OracleCl ...

  7. IIS7如何显示详细错误信息

    使用Vista或Win7操作系统的用户在不断增加,用Win7旗舰版开发测试程序程序人员也与日俱增,Win7下测试程序时,如果程序出 错,IIS7会提示HTTP Error 500 - Internal ...

  8. Win8.1系统下安装nodeJS

    Nodejs简介 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js ...

  9. 创建ListView的基本步骤

    参考<疯狂android讲义>第2.5节P94 1.创建一个或者多个ListView <LinearLayout xmlns:android="http://schemas ...

  10. [原]此程序专用来说明C++模板的用法

    #include using namespace std; //此程序专用来说明模版的使用 template void swap1(T& a,T& b){     T temp=a; ...