手机
当前位置:查字典教程网 >编程开发 >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创建平滑滚动效果(可以是到顶部、到底部或指定地方)】相关文章:

Eclipse编辑jsp、js文件时卡死现象的解决办法汇总

JavaScript实现DIV层拖动及动态增加新层的方法

Java数据类型以及变量的定义

强制设为首页代码

jQuery实现仿腾讯微博滑出效果报告每日天气的方法

原生JS和JQuery动态添加、删除表格行的方法

安装使用Mongoose配合Node.js操作MongoDB的基础教程

JQuery中Text方法用法实例分析

什么是Node.js?

Javascript递归打印Document层次关系实例分析

精品推荐
分类导航