主页平滑滚动效果

原创于 2023-07-18 09:09:57 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

此HTML代码展示了如何使用fullPage.js库创建一个具有全屏滚动效果的页面，包括不同颜色背景的三个部分。页面还包含一个固定位置的菜单，可与滚动部分联动。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Page Scroll Effect</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css">
    <style>
        /* 自定义样式 */
        .section {
            text-align: center;
            padding: 50px;
            color: #fff;
        }
        #menu {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
        }
        #menu li {
            display: inline-block;
            margin: 0 10px;
            cursor: pointer;
            color: #fff;
        }
    </style>
</head>
<body>
<div id="fullpage">
    <div class="section" data-anchor="section1" style="background-color: #f2f2f2;">
        <h1>Section 1</h1>
    </div>
    <div class="section" data-anchor="section2" style="background-color: #4BBFC3;">
        <h1>Section 2</h1>
    </div>
    <div class="section" data-anchor="section3" style="background-color: #7BAABE;">
        <h1>Section 3</h1>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
<script>
    $(document).ready(function() {
        $('#fullpage').fullpage({
            sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE'],
            scrollingSpeed: 1000,
            menu: '#menu',
            afterLoad: function(origin, destination, direction) {
                // 滚动到某个部分后的操作
            }
        });
    });
</script>
</body>
</html>