js平滑滚动到顶部,底部,指定地方

来源：互联网发布：客服中心数据分析编辑：程序博客网时间：2024/05/21 06:35
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>js平滑滚动到顶部、底部、指定地方</title><script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script><style>.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};</style></head><body><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box a">产品介绍产品介绍 http://www.daixiaorui.com 产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box bottom"></div><div class="location">  <p class="scroll_top">返回顶部</p>  <p class="scroll_a">产品介绍</p>  <p class="scroll_bottom">滑到底部</p></div><script type="text/javascript">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);});});</script></body></html>
0 0