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

Raaabbit 发布于2019-06-27 14:05 / 2700人阅读

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

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

使用方法

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

2－XHTML

 
   产品展示 
   新闻中心 
   服务支持 
   联系我们 
   人才招聘 
 
 
   产品展示 
 
 
   新闻中心 
 
 
   服务支持 
 
 
   联系我们 
 
 
   人才招聘

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

3－CSS

.nav{width:500px;margin:20px auto;} 
.nav li{float:left; width:100px; height:24px; line-height:24px} 
.box{height:500px} 
.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px} 
#pro,#ser{background:url(img/bg.jpg)} 
#news,#con{background:url(img/bg2.gif)}

4－使用scrollTo.js插件

$(function(){ 
    $(".nav_pro").click(function(){ 
        $.scrollTo("#pro",500); 
    }); 
    $(".nav_news").click(function(){ 
        $.scrollTo("#news",800); 
    }); 
    $(".nav_ser").click(function(){ 
        $.scrollTo("#ser",1000); 
    }); 
    $(".nav_con").click(function(){ 
        $.scrollTo("#con",1200); 
    }); 
    $(".nav_job").click(function(){ 
        $.scrollTo("#job",1500); 
    }); 
});

当点击导航按钮时，触发scrollTo方法，$.scrollTo带有两个参数，第一个是指定要滚动的目的ID，第二个参数是滚动时间间隔，以毫秒为单位。在本例中，只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动，传冲效果等，具体可以参照官方网站的例子： http://demos.flesler.com/jquery/scrollTo/

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

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

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

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

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

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

Backache 2019-08-21 10:54 评论0 收藏0
JQuery插件：ScrollTo平滑滚动到页面指定位置

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

A Loity 2019-08-29 11:02 评论0 收藏0
JQuery插件：ScrollTo平滑滚动到页面指定位置

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

Shihira 2019-08-05 17:51 评论0 收藏0
JQuery插件：ScrollTo平滑滚动到页面指定位置

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

binaryTree 2019-08-01 15:30 评论0 收藏0
javascript模块化（二）--RequireJS初探

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

edgardeng 2019-08-21 10:54 评论0 收藏0