I am trying to create a page redirection to a particular section, i.e. I want to go to a particular anchor div on a page without scrolling behavior. However, I have a query string in the URL for pagination so the #id method failed for me. I tried "scrollIntoView()" but it contains the page scrolling behavior, which is undesired. May I ask if there is any alternative solution to this problem?
I am using Vue for the frontend & Codeigniter for the backend. Here is my code:
mounted() {
// anchorPageToProductList
if (this.isOnQuery) {
console.log('isOnQuery');
this.scrollToProductList();
} else {
console.log('isNotOnQuery');
}
},
methods: {
scrollToProductList(){
window.addEventListener('DOMContentLoaded', () => {
// scroll animation
document.getElementById('product-list-anchor').scrollIntoView(true);
});
},
Example of my URL case:
http://www.example.com/Product/list?search=&sort=3&type=-1&event%5B%5D=11&pagination=1
Thank you!!
I've tried to unset the scrolling behavior, allow the the page to jump to the desired section, then set back the smooth-scroll behavior. So It now works without the scrolling behavior. Thanks for all the comments:)
My code:
scrollToProductList(){
window.addEventListener('DOMContentLoaded', () => {
// select the whole html & disable smooth-scroll behavior in css
let htmlElement = document.querySelector('html');
htmlElement.style.scrollBehavior = 'auto';
// go to the anchor point
document.getElementById('product-list-anchor').scrollIntoView(true);
// enable smooth-scroll behavior again
htmlElement.style.scrollBehavior = 'smooth';
});
}