-
Notifications
You must be signed in to change notification settings - Fork 20.6k
Description
Description
I have a 'go to top' link in a Joomla 3.9 template using Bootstrap 4.1x. In order for Bootstrap 4.1 to work correctly I have a link in the head of the file to the CDN version of Bootstrap: /bootstrap/4.1.3/css/bootstrap.min.css and three scripts at the bottom of the html body with links to jquery-3.3.1.slim.min.js, popper.min.js and bootstrap.min.js.
When I include this script at the end of my index.php html body
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
or even just <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
the 'go to top' link simply does not appear.
However, if I use the non-slim.min original: <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
it works perfectly.
The jquery is in my template.js file:
`jQuery(document).ready(function() {
var offset = 450;
var duration = 300;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.gotop').fadeIn(duration);
} else {
jQuery('.gotop').fadeOut(duration);
}
});
jQuery('.gotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});`
This in the template.css:
.gotop { background-color: #ABCDA8; background-image: url("../assets/images/gotop.png"); background-repeat: no-repeat; background-position: center; text-indent: -9999px; position: fixed; bottom: 0; right: 0; width: 45px; height: 50px; display: none; text-decoration: none; }
and this at the foot of the html body just above the three scripts for the files required by Bootstrap
<div class="gotop"><a href="#">Back to Top</a></div>