本文实例讲述了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/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title页面平滑滚动jquery代码/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script脚本类型=' text/JavaScript '(函数($){ $)。扩展($。fn，{ scrollTo:function(time，to){ time=time | | 800；to=to | | 1；$('a[href*=#]'，这个)。单击(function(){ if(location.pathname.replace(/^//' ')==this.pathname.replace(/^//' ')位置。hostname==this。主机名){ var $ target=$(这。哈希)；$ target=$ target。length $ target | | $('[name=' this。哈希。切片(1)']')；if($ target。长度){ if(to==1){ $(' html，body ').制作动画({ scrollTop: $target.offset().top }、time)；} else if(to==2){ $('html，body ').动画({ scrollLeft: $ target.offset().左}、时间);}else{alert('参数错误');}返回false } } })；} });})(jQuery)；/script script type=' text/JavaScript ' language=' JavaScript ' $(function(){//$(' # a111 ')).滚动到(600,2妯悜)$('#a111 ').滚动到(700)})；/script style type=' text/CSS ' html { _ overflow :隐藏}正文{ margin :0高度：100%;溢出-y : auto } # a111 {位置：固定；宽度宽度：1000像素左侧：10%;} * html # a111 { position :绝对值；} # a111 a { display:block宽度：50 px高度：20 px背景技术： # 000;color : # ffffloat : left } # a111 a :悬停{背景： # f60} # b11 { height:1000px背景技术： # 090;} # b22 { height:1000px背景# fc0} # b33 { height:1000px背景技术# 09d }/style/head dydiv id=' a111 ' a href=' # b11 ' Mao 1/aa href=' # b22 ' Mao 2/aa href=' # b33 ' Mao 3/a/div id=' b11 '网页1/divdiv id='b22 '网页2/divdiv id='b33 '网页3/div /body/html希望本文所述对大家jQuery程序设计有所帮助。