JQuery插件：ScrollTo平滑滚动到页面指定位置

最新推荐文章于 2024-08-09 07:33:35 发布

weixin_33881041

最新推荐文章于 2024-08-09 07:33:35 发布

阅读量457

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hellman/p/10690407.html

本文介绍如何利用jQuery库和scrollTo.js插件实现网页导航菜单的平滑滚动效果。通过设置HTML结构、CSS样式及JavaScript事件，使用户在点击导航链接时，页面能以指定速度滚动到目标区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、准备jQuery库和scrollTo.js插件。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

2、HTML

<ul class="nav"> 
<li><a href="#" class="nav_pro">产品展示</a></li> 
<li><a href="#" class="nav_news">新闻中心</a></li> 
<li><a href="#" class="nav_ser">服务支持</a></li> 
<li><a href="#" class="nav_con">联系我们</a></li> 
<li><a href="#" class="nav_job">人才招聘</a></li> 
</ul>

3、css

.nav{width:500px;margin:20px auto;} 
.nav li{float:left; width:100px; height:24px; line-height:24px} 
.box{height:500px} 
.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px} 
#pro,#ser{background:url(img/bg.jpg)} 
#news,#con{background:url(img/bg2.gif)}

4、使用scrollTo.js插件

$(function(){ 
    $(".nav_pro").click(function(){ 
        $.scrollTo('#pro',500); 
    }); 
    $(".nav_news").click(function(){ 
        $.scrollTo('#news',800); 
    }); 
    $(".nav_ser").click(function(){ 
        $.scrollTo('#ser',1000); 
    }); 
    $(".nav_con").click(function(){ 
        $.scrollTo('#con',1200); 
    }); 
    $(".nav_job").click(function(){ 
        $.scrollTo('#job',1500); 
    }); 
});

当点击导航按钮时，触发scrollTo方法，$.scrollTo带有两个参数，第一个是指定要滚动的目的ID，第二个参数是滚动时间间隔，以毫秒为单位。

转载于:https://www.cnblogs.com/hellman/p/10690407.html