I'm trying to implement a feature on my website where the page scrolls with a sliding effect when the user presses the "Scroll" button. However, I've encountered issues as it doesn't seem to work despite adding the necessary tags to my HTML file.
Even after finding a script that should enable this functionality, it still didn't work as expected.
Can anyone help me identify where I might be going wrong?
home.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{% static 'js/home.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
.
.
.
<section id="section01" class="demo">
<h1> Welcome to PHARSYS </h1>
<h2>Scroll for Login or Signup</h2>
<a href="#section02"><span></span></a>
</section>
<section id="section02" class="demo">
<h1>Login</h1><br>
<h2>Press the button to log in to the system.
<br><br>
</h2>
<a href="#section03"><span></span>Scroll</a>
</section>
<section id="section03" class="demo">
<h1>Signup</h1>
<h2>Press the button to register to the system</h2>
</section>
home.js
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
home.css
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
...