I'm almost done with my website, but I'm facing a problem.
There are 3 blocks of text on my page - 2 static and 1 dynamic.
When I click a button, the page should change, which is working fine. However, when I added smooth scroll to the website, the dynamic page change stopped working.
It seems like one function is overriding the other.
Any suggestions on how to fix this?
Below is the code from index.php:
<?php
$page = 'home';
$pages = array( 'home' , 'hoogopgeleid', 'kennis' , 'extern', 'uitstroom', 'dynamiek' , 'didacticum');
if( in_array( $_GET['page'], $pages ) ) {
$page = $_GET['page'];
}
?>
For the smooth scroll feature, I used code I found online:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
In my button, I use the following link:
<button> <a href="?page=home#pro"> Here some text </a> </button>
I also found information about using home#pro online, but as mentioned before, only one feature is currently working.
I'm hoping for a simple solution to resolve this issue! Thank you.