Rumah > hujung hadapan web > tutorial js > 使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)_jquery

使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)_jquery

WBOY
Lepaskan: 2016-05-16 16:46:54
asal
1320 orang telah melayarinya

采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用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平滑滚动到顶部、底部、指定地方







产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍






 

返回顶部


 

产品介绍


 

滑到底部





Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan