Home>

After installing the drop-down menu in the navigation menu, the page top button JS that worked so far has stopped working.

The drop-down works, but the page top button doesn't work

<script src = "https://code.jquery.com/jquery-1.12.4.min.js" integrity = "sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ + Xp8a4MxAQ =" crossorigin = "anonymous"></script >
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQn4" F86dIHz0 = " script>
    <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizo" crossorigin = "anonymous"></>
    <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM + B07jRM" crossorigin = ""
    <script type = "text/javascript" src = "js/slick.min.js"></script>
    <script type = "text/javascript" src = "js/script.js"></script>
</body>
</html>

In the following order, the page top button will move and the drop down will not work.

<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizo" crossoriginanony "></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM + B07jRM" crossorigin = ""
<script type = "text/javascript" src = "js/slick.min.js"></script>
<script type = "text/javascript" src = "js/script.js"></script>
<script src = "https://code.jquery.com/jquery-1.12.4.min.js" integrity = "sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ + Xp8a4MxAQ =" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQn4" F86dIHz0 = " script>
</body>
</html>


Excerpt from script.js

// Smooth scroll
$(function () {
    $('a [href ^ = "#"]'). click (function () {
        var speed = 500;
        var href = $(this) .attr ("href");
        var target = $(href == "#" || href == ""? 'html': href);
        var position = target.offset (). top;
        $("html, body"). animate ({scrollTop: position}, speed, "swing");
        return false;
    });
});

// Page top button
$(function () {
    var topBtn = $('# page_top');
    topBtn.hide ();
    // Button display when scroll reaches 100
    $(window) .scroll (function () {
        if ($(this) .scrollTop ()>500) {
            topBtn.fadeIn ();
        } else {
            topBtn.fadeOut ();
        }
    });
    // Scroll to top
    topBtn.click (function () {
        $('body, html'). animate ({
            scrollTop: 0
        }, 500);
        return false;
    });
});

If jquery-1.12.4.min.js and popper.min.js required for the drop-down menu are listed above, only the page top button JS in the script.js below will not function.

Please note that we will add any additional information if necessary.

  • Answer # 1

    You are loading a different version of jQuery, but you should load either one.
    Currently, 3.3.1 is readingjquery-3.3.1.slim.min.js, but please use the one without url slim. The slim version does not implement some methods including animate.

    And when you load a program you wrote with a script tag, write it after jQuery, bootstrap, popper.

  • Answer # 2

    If JQuery versions and the order of description are not read, we thought that it would be better to write either one in Javascript, and we made the page top button that seems highly feasible into pure Javascript.

    In the head

    bootstrap/4.3.1/css/bootstrap.min.css
    use.fontawesome.com/releases/v5.3.1/css/all.css
    slick-theme.css
    slick.css
    style.css
    ajax/libs/jquery/1.11.0/jquery.min.js
    load.js

    ■ Body
    ・ ・ ・ Omitted ...
    Load footer with load.js
    JAVASCRIPT
    code.jquery.com/jquery-1.12.4.min.js
    cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
    code.jquery.com/jquery-3.3.1.slim.min.js
    stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    slick.min.js
    script.js

    In script.js
    Installed with reference to the following URL
    https://memocarilog.info/jquery/7236