资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JQuery插件：ScrollTo平滑滚动到页面指定位置

JQuery插件：ScrollTo平滑滚动到页面指定位置

A Loity / 1521人阅读

摘要：是一款基于的滚动插件，当点击页面的链接时，可以平滑地滚动到页面指定的位置。查看演示使用方法准备库和插件。使用插件当点击导航按钮时，触发方法，带有两个参数，第一个是指定要滚动的目的，第二个参数是滚动时间间隔，以毫秒为单位。

ScrollTo是一款基于jQuery的滚动插件，当点击页面的链接时，可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多，页面长度有好几屏的场合，本文以DEMO为示例讲解该插件的应用。查看演示DEMO

使用方法

1－准备jQuery库和scrollTo.js插件。

</>复制代码 
  1.

2－XHTML

</>复制代码 
  1.  
  2.  
  3.    
    产品展示
     
  4.  
  5.  
  6.    
    新闻中心
     
  7.  
  8.  
  9.    
    服务支持
     
  10.  
  11.  
  12.    
    联系我们
     
  13.  
  14.  
  15.    
    人才招聘

我们用一个页面展示导航和导航对应的每个模块。

3－CSS

</>复制代码 
  1. .nav{width:500px;margin:20px auto;} 
  2. .nav li{float:left; width:100px; height:24px; line-height:24px} 
  3. .box{height:500px} 
  4. .box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px} 
  5. #pro,#ser{background:url(img/bg.jpg)} 
  6. #news,#con{background:url(img/bg2.gif)}

4－使用scrollTo.js插件

</>复制代码 
  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方法，$.scrollTo带有两个参数，第一个是指定要滚动的目的ID，第二个参数是滚动时间间隔，以毫秒为单 位。在本例中，只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动，传冲效果等，具体可以参照官方网站的例子： http://demos.flesler.com/jquery/scrollTo/

原文地址：http://www.helloweba.com/view-blog-118.html

云服务器 GPU云服务器 滚动到指定位置 jquery滚动条插件 滚动到原来位置 解析域名到指定页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111380.html

相关文章

  • JQuery插件：ScrollTo平滑滚动到页面指定位置

    摘要：是一款基于的滚动插件，当点击页面的链接时，可以平滑地滚动到页面指定的位置。查看演示使用方法准备库和插件。使用插件当点击导航按钮时，触发方法，带有两个参数，第一个是指定要滚动的目的，第二个参数是滚动时间间隔，以毫秒为单位。 ScrollTo是一款基于jQuery的滚动插件，当点击页面的链接时，可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多，页面长度有好几屏的场合，本文以DEMO...

    Backache 评论0 收藏0

  • JQuery插件：ScrollTo平滑滚动到页面指定位置

    摘要：是一款基于的滚动插件，当点击页面的链接时，可以平滑地滚动到页面指定的位置。查看演示使用方法准备库和插件。使用插件当点击导航按钮时，触发方法，带有两个参数，第一个是指定要滚动的目的，第二个参数是滚动时间间隔，以毫秒为单位。 ScrollTo是一款基于jQuery的滚动插件，当点击页面的链接时，可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多，页面长度有好几屏的场合，本文以DEMO...

    binaryTree 评论0 收藏0

  • JQuery插件：ScrollTo平滑滚动到页面指定位置

    摘要：是一款基于的滚动插件，当点击页面的链接时，可以平滑地滚动到页面指定的位置。查看演示使用方法准备库和插件。使用插件当点击导航按钮时，触发方法，带有两个参数，第一个是指定要滚动的目的，第二个参数是滚动时间间隔，以毫秒为单位。 ScrollTo是一款基于jQuery的滚动插件，当点击页面的链接时，可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多，页面长度有好几屏的场合，本文以DEMO...

    Raaabbit 评论0 收藏0

  • javascript模块化（二）--RequireJS初探

    摘要：看完视频初步认识了一下，以及模块化开发的概念，在此做一下总结。所以应该将功能抽象成模块。并且非常耗性能解决办法，在滚动条正在运动或者已经到达目的地，就不应该执行动画。 前言：在慕课网上跟着视频《侧边工具栏开发》做了一遍，用到了jquery操作DOM，其中，用requirejs管理模块依赖，然后自定义了两个模块它们都依赖jquery，并且其中一个自定义模块依赖另一个，所以要暴露出接口。看...

    edgardeng 评论0 收藏0

发表评论

登陆后可评论

0条评论

A Loity

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<