这篇文章主要介绍了使用jqueryanimate创建平滑效果,效果可以到顶部、到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下

采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用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 class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</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>

最新资讯
微信与谷歌等国际巨头合作 共同扩展微信小游戏生态

微信与谷歌等国际巨头

近日,微信和谷歌达成合作,将携手海外开发者共同扩展微信
刘强东涉嫌性侵案后首发声:京东管理团队已稳定成型

刘强东涉嫌性侵案后首

京东发布第三季度财报后的电话会议上,刘强东在性侵风波
京东高管解读财报:京东因规模而具有独特的竞争优势

京东高管解读财报:京东

根据我们对零售即服务的定义,它基本上有两个部分组成。
阿里健康4-9月营收18.79亿元 同比增长111.2%

阿里健康4-9月营收18.

阿里健康在港交所公告,截至9月30日止六个月,本集团录得
直击|松鼠AI栗浩洋:AI将颠覆任何行业 有四关键词

直击|松鼠AI栗浩洋:AI

乂学教育松鼠AI创始人栗浩洋近日在公开演讲时指出,任何
小米CFO周受资在电话会上一口气曝了这些料

小米CFO周受资在电话

小米CFO周受资在电话会中称,小米已站稳高端市场、与美
最新文章
详解mpvue小程序中怎么引入iconfont字体图标

详解mpvue小程序中怎

这篇文章主要介绍了详解mpvue小程序中怎么引入iconfon
JS如何获取地址栏的参数实例讲解

JS如何获取地址栏的参

本篇文章给大家带来了关于JS如何获取地址栏的参数实例
angularJs利用$scope处理升降序的方法

angularJs利用$scope

今天小编就为大家分享一篇angularJs利用$scope处理升
CKEditor4配置与开发详细中文说明文档

CKEditor4配置与开发

网上分享的CKEditor4中文说明很多都只是的部分使用方
angularjs获取到My97DatePicker选中的值方法

angularjs获取到My97D

今天小编就为大家分享一篇angularjs获取到My97DatePic
vue实现一个炫酷的日历组件

vue实现一个炫酷的日

公司业务新开了一个商家管理微信H5移动端项目,日历控件