jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】-前端开发

下面是关于“jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】”的完整攻略：

下面是关于“jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】”的完整攻略：

1. 简介

这是一篇jQuery实现导航滚动到指定内容效果的完整实例教程，通过这个效果，用户能够在网页的导航菜单上点击对应的标签，直接跳转到相应的内容位置，提高网站的用户体验度。

2. 实现过程

步骤一：导航菜单设置

首先需要设置导航菜单的样式和内容，其中每个菜单项需要设置对应的锚点，如下所示：

<ul class="navbar">
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
</ul>

步骤二：内容区域设置

需要给每个需要跳转到的内容区域设置对应的id值：

<div id="section1">内容1</div>
<div id="section2">内容2</div>
<div id="section3">内容3</div>
<div id="section4">内容4</div>

步骤三：jQuery实现导航滚动到指定内容效果

步骤三是实现导航跳转对应的内容区域，实现代码如下：

$(document).ready(function () {
    $('a[href*=#]').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) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});

步骤四：附加功能

如果需要增加动态效果，这里提供两种示例说明：

示例一：导航菜单添加悬浮效果

当用户滚动页面时，“当前显示区域”的导航菜单自动显示为选中状态。实现代码如下：

$(document).ready(function () {
    $(window).scroll(function () {
        var windowTop = $(window).scrollTop();
        $('div[id]').each(function (i, obj) {
            if (windowTop > ($(obj).offset().top - 50)) {
                $('.navbar li a.active').removeClass('active');
                $('.navbar li a').eq(i).addClass('active');
            }
        });
    });
});

示例二：导航菜单添加平滑滚动效果

实现代码如下：

$(document).ready(function () {
    $('a[href*=#]').click(function () {
        var headerHeight = $('header').height();
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top - headerHeight
            }, 1000);
            return false;
        }
    });
});