编辑：

Question

我真的不知道为什么我会遇到这个问题。每次我尝试将自定义css文件添加到标头。我正在使用名为onepage-scroll.js的脚本需要将文件放在标题<script src="http://greenbex.com/js/onepagescroll.js"></script>中然后编写代码... 这是我的标题

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://greenbex.com/css/onepage-scroll.css">
    <link rel="stylesheet" type="text/css" href="http://greenbex.com/css/style.css"> //old css from another page
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <script src="http://greenbex.com/js/onepagescroll.js"></script>
    <title>ElectroFen - Team</title>
</head>

这样一切正常并且做了工作，但是一旦我将其更改为我当地的新自定义CSS <link rel="stylesheet" type="text/css" href="css/style.css">页面空白并说

未捕获的TypeError：$（...）。onepage_scroll不是函数（...）我不知道导致问题的原因......

我的css文件以此

开头

    /* Prefix */



    #mainpage {
        height: 100vh;
        width: 100vw;
    }
    html {
        display: none;
    }

    .col-md-8, .col-md-4 {
            padding: 0;
            margin: 0;
        }
    .row {
       margin-right: 0;
       margin-left: 0;
    }
    /*  HOME PAGE  */
....

修改

这是完整的代码，这种方式有效。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://greenbex.com/css/onepage-scroll.css">
    <link rel="stylesheet" type="text/css" href="http://greenbex.com/css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <script src="http://greenbex.com/js/onepagescroll.js"></script>
    <title>ElectroFen - Team</title>
</head>
<body>
    <div class="main">
        <section id="header">
            <!-- code -->
        </section>
        <section id="projects">
                <!-- code -->
        </section>
        <section id="projects">
                <!-- code -->
        </section>
        <section id="projects">
                <!-- code -->
        </section>
    </div>
</body>
<script src="http://greenbex.com/js/jquery.js"></script>
<script src="http://greenbex.com/js/bootstrap.js"></script>
<script src="http://greenbex.com/js/script.js"></script>
</body>
</html>

添加新的自定义css文件<link rel="stylesheet" type="text/css" href="css/style.css">后，它无法正常工作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://greenbex.com/css/onepage-scroll.css">
    <link rel="stylesheet" type="text/css" href="http://greenbex.com/css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"> //this line
    <script src="http://greenbex.com/js/onepagescroll.js"></script>
    <title>ElectroFen - Team</title>
</head>
<body>
    <div class="main">
        <section id="header">
            <!-- code -->
        </section>
        <section id="projects">
                <!-- code -->
        </section>
        <section id="projects">
                <!-- code -->
        </section>
        <section id="projects">
                <!-- code -->
        </section>
    </div>
</body>
<script src="http://greenbex.com/js/jquery.js"></script>
<script src="http://greenbex.com/js/bootstrap.js"></script>
<script src="http://greenbex.com/js/script.js"></script>
</body>
</html>

并说

script.js：19未捕获TypeError：$（...）。onepage_scroll不是函数（...）

script.js有

//custom script here
    onePageScroll(".main", {
       sectionContainer: "section",     // sectionContainer accepts any kind of selector in case you don't want to use section
       easing: "ease",                  // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in", 
                                        // "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
       animationTime: 1000,             // AnimationTime let you define how long each section takes to animate
       pagination: true,                // You can either show or hide the pagination. Toggle true for show, false for hide.
       updateURL: false,                // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
       beforeMove: function(index) {},  // This option accepts a callback function. The function will be called before the page moves.
       afterMove: function(index) {},   // This option accepts a callback function. The function will be called after the page moves.
       loop: true,                     // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
       keyboard: true,                  // You can activate the keyboard controls
       responsiveFallback: false        // You can fallback to normal page scroll by defining the width of the browser in which
                                        // you want the responsive fallback to be triggered. For example, set this to 600 and whenever 
                                        // the browser's width is less than 600, the fallback will kick in.
    });
    $(document).ready(function(){
        $(".main").onepage_scroll();
    });

Answer 1

由于您使用的是纯插件版本，因此请删除第$(".main").onepage_scroll();行

插件已经加载，不需要重新初始化，这也会导致问题。

编辑：

您一直在使用此plugin，https://github.com/peachananr/purejs-onepage-scroll，jQuery不是必需的。

但是您已经使用了plugin，https://github.com/peachananr/onepage-scroll的初始化，需要jQuery。

Answer 2

可能需要插入jquery？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://greenbex.com/js/bootstrap.js"></script>
<script src="http://greenbex.com/js/onepagescroll.js"></script>

<script src="http://greenbex.com/js/script.js"></script>

启动顺序很重要

Answer 3

我建议放置3个脚本：

-uri_id

在此之前：

<script src="http://greenbex.com/js/jquery.js"></script>
<script src="http://greenbex.com/js/bootstrap.js"></script>
<script src="http://greenbex.com/js/script.js"></script>

“TypeError：＆＃39; undefined＆＃39;在尝试添加我的自定义CSS时不是一个函数

3 个答案:

编辑：