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模板实现方法
Apr 03 Javascript
Javascript Objects详解
Sep 04 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 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
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
Javascript常考语句107条收集
2010/03/09 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
多个应用共存的Django配置方法
2018/05/30 Python
python利用微信公众号实现报警功能
2018/06/10 Python
详解python中的装饰器
2018/07/10 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
总经理职责
2013/12/22 职场文书
2014会计年终工作总结
2014/12/20 职场文书
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
Redis过期数据是否会被立马删除
2022/07/23 Redis