手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
摘要:采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转...

采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。

滚动到顶部:

复制代码 代码如下:$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

滚动到指定位置:

复制代码 代码如下:$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});

完整实例源码参考:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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://cdn.staticfile.org/jquery/2.1.1-rc2/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></div>

<div></div>

<div></div>

<div></div>

<div>产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div>

<p>返回顶部</p>

<p>产品介绍</p>

<p>滑到底部</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>

【使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)】相关文章:

强制设为首页代码

两表格传递变量

对联广告 可关闭

手机开发必备技巧:javascript及CSS功能代码分享

谈一谈javascript闭包

jQuery实现自动滚动到页面顶端的方法

iscroll.js的上拉下拉刷新时无法回弹的解决方法

Jquery中基本选择器用法实例详解

AngularJS学习笔记之ng-options指令

简单的防盗链功能代码(iframe)

精品推荐
分类导航