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 相关文章推荐
js 页面输出值
Nov 30 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
Angular 应用技巧总结
Sep 14 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 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
重置版宣传动画
2020/04/09 魔兽争霸
晶体管单管来复再生式收音机
2021/03/02 无线电
PHP中的Streams详细介绍
2014/11/12 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
python在windows下实现备份程序实例
2014/07/04 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
python 6种方法实现单例模式
2020/12/15 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
女大学生毕业找工作的自我评价
2013/10/03 职场文书
大专毕业生求职信
2014/07/05 职场文书
单位工作证明范文
2014/09/14 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
运输公司工作总结
2015/08/11 职场文书
学生会主席任命书
2015/09/21 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
matlab xlabel位置的设置方式
2021/05/21 Python
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
浅谈Web Storage API的使用
2021/06/23 Javascript