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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php流量统计功能的实现代码
2012/09/29 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
javascript数组去掉重复
2011/05/12 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
有关Python的22个编程技巧
2018/08/29 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
运动会入场词200字
2014/02/15 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
社区维稳工作方案
2014/06/06 职场文书
放飞理想演讲稿
2014/09/09 职场文书
故宫的导游词
2015/01/31 职场文书
医院合作意向书范本
2015/05/08 职场文书
交通事故代理词范文
2015/05/23 职场文书