脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery网页页面平滑滚动

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

 更新时间：2015年11月02日 10:17:43   作者：企鹅  
这篇文章主要介绍了jquery实现网页的页面平滑滚动效果代码,涉及jQuery结合鼠标事件操作页面元素滚动效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-link-scroll-page-codes/

具体代码如下：

<!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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 利用jQuery的deferred对象实现异步按顺序加载JS文件

    利用jQuery的deferred对象实现异步按顺序加载JS文件

    如果你现在对jQuery中的deferred还不了解,jQuery的deferred对象详解一文接下来介绍deferred对象如何实现异步顺序加载JS文件，感兴趣的你可以参考下哈
    2013-03-03
  • 理解jQuery stop()方法

    理解jQuery stop()方法

    本文目的：为了了解stop()的用法，举个例子，直观的方式看看。非常的简单实用，有需要的小伙伴参考下
    2014-11-11
  • jQuery 计算iframe 窗口大小的方法

    jQuery 计算iframe 窗口大小的方法

    这篇文章主要介绍了jQuery如何计算iframe窗口大小,需要的朋友可以参考下
    2014-05-05
  • jQuery判断是否存在滚动条的简单方法

    jQuery判断是否存在滚动条的简单方法

    下面小编就为大家带来一篇jQuery判断是否存在滚动条的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • jQuery中 prop() attr()使用详解

    jQuery中 prop() attr()使用详解

    在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？关于它们两个的区别，这里谈谈我的心得，我的心得很简单：对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
    2015-05-05
  • jQuery内存泄露解决办法

    jQuery内存泄露解决办法

    这篇文章主要为大家详细介绍了jQuery内存泄露解决办法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 查看大图功能代码jquery版

    查看大图功能代码jquery版

    查看大图的效果想必大家在浏览网页时都有看过吧，其实实现起来很简单的，下面有个不错的示例，喜欢的朋友可以参考下
    2013-11-11
  • jQuery实现鼠标经过图片预览大图效果

    jQuery实现鼠标经过图片预览大图效果

    我们可以借助jQuery来实现一些很酷炫的效果，本篇为大家介绍下通过jQuery实现当鼠标经过了图片数，图片会放大进行预览大图,需要的朋友可以参考下
    2014-04-04
  • 基于jQuery的星级评分插件

    基于jQuery的星级评分插件

    以前写过一篇文章以jquery为基础的星星评分，今天有时间把这个功能重写，并以jQuery插件的形式出现以便以后使用。
    2011-08-08
  • jquery实现可拖动DIV自定义保存到数据的实例

    jquery实现可拖动DIV自定义保存到数据的实例

    这篇文章主要介绍了jquery实现可拖动DIV自定义保存到数据，有需要的朋友可以参考一下
    2013-11-11

最新评论