当前位置: 编程技术>WEB前端
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
来源: 互联网 发布时间:2014-08-25
本文导语: 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。 滚动到顶部: 代码如下:$('.scroll_top').click(functi...
采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。
滚动到顶部:
代码如下:
$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
滚动到指定位置:
代码如下:
$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});
完整实例源码参考:
代码如下:
js平滑滚动到顶部、底部、指定地方
.box{ height:200px; width:100%; background:#ccc; margin:10px 0;}
.location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003};
产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍
返回顶部
产品介绍
滑到底部
jQuery(document).ready(function($){
$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});
$('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);});
});