HTML, CSS 및 jQuery: 아름다운 수직 스크롤 탐색 구축

CSS 样式

接下来，我们使用 CSS 样式来设计和布局导航栏。以下是一个基础的样式示例：

.nav-menu { list-style: none; margin: 0; padding: 0; } .nav-item { display: block; margin-bottom: 10px; } .nav-item a { display: block; padding: 10px; text-decoration: none; color: #333; background-color: #f1f1f1; border-radius: 3px; } .nav-item.active a { color: #fff; background-color: #333; }

通过这些基本样式，我们可以创建一个简单的垂直导航栏，并为活动导航按钮应用不同的样式。

jQuery 滚动效果

现在，我们需要为导航栏添加一个平滑的滚动效果，以便在点击导航按钮时，页面会平滑滚动到相应的节段。为了实现这个效果，我们将使用 jQuery 库。

首先，在 HTML 文件底部的标签前添加以下代码引入 jQuery 库：

然后，在 JavaScript 文件中添加以下代码：

$(document).ready(function() { // 点击导航按钮时，平滑滚动到相应的节段 $('a[href^="#"]').on('click', function(event) { event.preventDefault(); var target = $(this.getAttribute('href')); if (target.length) { $('html, body').stop().animate({ scrollTop: target.offset().top }, 1000); } }); // 根据滚动位置添加活动导航按钮样式 $(window).scroll(function() { var scrollDistance = $(window).scrollTop(); $('.nav-item').each(function(i) { if ($(this).position().top <= scrollDistance + 100) { $('.nav-item.active').removeClass('active'); $('.nav-item').eq(i).addClass('active'); } }); }).scroll(); });

以上代码实现了两个功能：

1. 当点击导航按钮时，页面将会平滑滚动到对应的节段。我们使用了 jQuery 的 animate()函数来实现平滑滚动效果。
2. 导航按钮的样式在滚动页面时会自动切换为活动状态。我们使用了 jQuery 的 scroll()rrreeeCSS 스타일

다음으로 CSS 스타일을 사용하여 탐색 모음을 디자인하고 레이아웃합니다. 다음은 기본 스타일 예입니다.

이러한 기본 스타일을 사용하면 간단한 수직 탐색 모음을 만들고 활성 탐색 버튼에 다양한 스타일을 적용할 수 있습니다.

1. 탐색 버튼을 클릭하면 페이지가 해당 섹션으로 부드럽게 스크롤됩니다. 부드러운 스크롤 효과를 얻기 위해 jQuery의 animate()함수를 사용했습니다.
2. 페이지를 스크롤하면 탐색 버튼 스타일이 자동으로 활성 상태로 전환됩니다. 우리는 페이지 스크롤 이벤트를 수신하고 스크롤 위치에 따라 현재 섹션에 활성 스타일을 추가하기 위해 jQuery의 scroll()함수를 사용했습니다. 위의 jQuery 코드를 웹페이지에 추가하여 아름다운 수직 스크롤 네비게이션 바를 완성했습니다. 요약하자면 HTML, CSS 및 jQuery를 결합하여 간단하고 우아하게 아름다운 수직 스크롤 탐색 모음을 만들 수 있습니다. 이 예를 통해 우리는 이러한 기술을 적용하여 웹 디자인의 사용자 경험을 향상시키는 방법을 더 잘 이해할 수 있습니다.

위 내용은 HTML, CSS 및 jQuery: 아름다운 수직 스크롤 탐색 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!