莫方教程网

专业程序员编程教程与实战案例分享

跟Cayley学前端单页面滚动式网站模版开发

jQuery是当今最流行的JS框架,利用jquery我们可以开发出很多高效的demo和成果。与此同时jquery相关的插件也可以很方便的完成一些特效,例如jquery scrollTo插件,可以方便的完成滑动到指定位置操作。记住由于jquery scrollto插件是依赖于jquery而产生,所以在头部文件引用时先引用jquery文件

要点:

  • jQuery scrollTo插件

  • jQuery框架

以导航标题为例展示

通过导航标题,进行检索可以点击进入相应部分

整个页面内容分为4个section,每个section展示不同的相关内容,根据ID名称当点击每个链接时会滑动到相应的位置,下面是其中一个section部分,此部分简单的显示一些内容语句,可以根据个人需求,编写相应代码

结构展示

  1. 单页面滑动效果

  2. 单击每一个导航选项实现基本的滑动效果,其他页面的内容均是来自

在同一张页面中涉及了以上4个模块,不想分页面展示,希望在一张页面中可以快速高效的查找到相关的内容,此时利用jquery scrollto插件的鼠标点击事件,执行相应的效果,代码如下,由于链接本身拥有一个hash 属性,hash是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分).当点击导航按钮时,所以触发scrollTo方法,$.scrollTo带有两个参数,第一个是指定要滚动的目的ID,第二个参数是滚动时间间隔,以毫秒为单 位。在本例中,只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动,传冲效果等,具体可以参照官方网站的例子:
http://demos.flesler.com/jquery/scrollTo/

事件处理