jquery实现网页的页面平滑滚动效果代码


Posted in Javascript onNovember 02, 2015

本文实例讲述了jquery实现网页的页面平滑滚动效果代码。分享给大家供大家参考,具体如下:

这款网页页面平滑滚动jquery代码,点击链接会让网页平滑滚动到链接对应的位置。

运行效果截图如下:

jquery实现网页的页面平滑滚动效果代码

在线演示地址如下:

具体代码如下:

<!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>页面平滑滚动jquery代码</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
(function($){
 $.extend($.fn,{
 scrollTo:function(time,to){
 time=time||800;
 to=to||1;
  $('a[href*=#]', this).click(function(){
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && 
location.hostname == this.hostname) {
 var $target = $(this.hash);
 $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
   if ($target.length) {
   if (to == 1) {
    $('html,body').animate({
    scrollTop: $target.offset().top
    }, time);
   }
   else if(to==2){
    $('html,body').animate({
    scrollLeft: $target.offset().left
    }, time);
   }else{
alert('argument error');
  }
   return false;
   }
  }
  });
  }
 });
})(jQuery);
</script>
<script type="text/javascript" language="javascript">
$(function(){
 // $("#a111").scrollTo(600,2妯???)
 $("#a111").scrollTo(700)
});</script>
<style type="text/css" >
html{ _overflow:hidden}
body {margin:0; height:100%; overflow-y:auto}
#a111 { position:fixed; width:1000px; left:10%;}
* html #a111 {position:absolute;}
#a111 a{ display:block; width:50px; height:20px; background:#000; color:#fff; float:left;}
#a111 a:hover{ background:#f60;}
#b11{ height:1000px; background:#090;}
#b22{ height:1000px; background:#fc0;}
#b33{ height:1000px; background:#09d;}
</style>
</head>
<body>
<div id="a111">
<a href="#b11">mao1</a>
<a href="#b22">mao2</a>
<a href="#b33">mao3</a>
</div>
<div id="b11">网页1</div>
<div id="b22">网页2</div>
<div id="b33">网页3</div> 
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
JS实现超简单的鼠标拖动效果
Nov 02 #Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 #Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 #Javascript
12个超实用的JQuery代码片段
Nov 02 #Javascript
JavaScript Length 属性的总结
Nov 02 #Javascript
基于Jquery实现万圣节快乐特效
Nov 01 #Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 #Javascript
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
推荐文章系统(一)
2006/10/09 PHP
paypal即时到账php实现代码
2010/11/28 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
Express之托管静态文件的方法
2018/06/01 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
详解详解Python中writelines()方法的使用
2015/05/25 Python
使用python实现tcp自动重连
2017/07/02 Python
python机器学习之神经网络(一)
2017/12/20 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
《这儿真好》教学反思
2014/02/22 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
扬州个园导游词
2015/02/06 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android