欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

无需插件实现 jQuery 平滑滚动

美国SK机房 发布于 2014-03-11  
jquery教程
平滑滚动总能让用户体验更友好。我推荐过一款jQuery平滑滚动插件,其通过调用$.scrollTo()或$.smoothScroll()函数实现页面的平滑滚动。事实上,你不需要任何插件,不需要添加多余的代码就可以做到jQuery页面平滑滚动。一切都靠jQuery自己的一行很简单的代码即可完成。
要实现此效果,只需运行:$(document.body).animate({scrollTop:$(~selector).offset().top}, ~time );
即可。不需要引入jQuery scroll插件。其中~selector和~time是自定义的值,分别是元素目标和时间,此方法将会使页面滚动到~selector的顶部。
例如 $(document.body).animate({scrollTop:$("#header").offset().top}, 1000 ); 可以实现滚动到我的页面的顶部。

平滑滚动到某元素中部

利用同样的原理,你也可以滚动到某个元素的中部位置。只需把“scrollTop”的内容改成
$(~selector).offset().top + $(~selector).height()/2 - $(window).height()/2
即可,也就是说运行下面的方法可以把页面平滑滚动到某元素的中部:
$(document.body).animate({scrollTop:$(~selector).offset().top + $(~selector).height()/2 - $(window).height()/2}, time );
是不是很简单呢。

jQuery scroll平滑滚动函数

或许你想要把它包装成为一个函数来方便调用。那么你可以用以下方法:
function _scroll( obj, time ){
	$(document.body).animate({scrollTop:$(obj).offset().top}, time );
}

//平滑滚动到某元素中部
function _scrollMiddle( obj, time ){
	$(document.body).animate({scrollTop:$(obj).offset().top + $(selector).height()/2 - $(window).height()/2}, time );
}
例如现在,我就可以通过调用_scroll("#header", 1000);或者_scrollMiddle("#header", 1000);来让页面平滑滚动到顶部或者顶部中部了!没有用到jQuery smooth scroll插件哦!

原文来自零度科技:http://www.ldisp.com/a/jquery/2014/2688.shtml

上一篇:jQuery 轻量级tip插件,jQuery鼠标提示插件DarkTooltip
下一篇:uploadify中文文件名乱码的解决方法

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理