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
-
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
You are loading a different version of jQuery, but you should load either one.
Currently, 3.3.1 is reading
jquery-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.