zoukankan      html  css  js  c++  java
  • scrollTo和scrollTo.js

    最近做一个项目前端要用到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效果等等。
  • 相关阅读:
    如何提高沟通能力?
    如何做到科学决策?推荐你看这本《决策必读12篇》
    领导者如何让员工真心服从自己?
    MBA看什么书,MBA教材书目推荐
    有关战略管理的书,哪本最值得推荐?
    市场营销必看书籍推荐
    P1208 混合牛奶题解
    P5019 铺设道路题解
    P1728 陶陶摘苹果题解
    P1106 删数问题题解
  • 原文地址:https://www.cnblogs.com/pangblog/p/3268712.html
Copyright © 2011-2022 走看看