Change offset of page-scroller method
-
Hello everybody!
I have a question: How can I change the offset-value which is used as target in the “page-scroller” function in “/inc/assets/js/theme-script.js” ?
More details here:
I made a website with the bootstrap scroll-spy navbar because the customer’s site is very small and has not much content.
Here more info about scroll-spy:(https://getbootstrap.com/docs/4.0/components/scrollspy/I changed the navbar id to “nav nav-pills”, added a data-spy and a data-target element to the body tag and changed the “nav-link” class in the new walker class to “nav-link page-scroll-tk”. “page-scroll-tk” is my custom scroll-to-hash function. It is a copy of the “page-scroller” function of the theme, but it has no CSS that increases the size of those elements.
Now everything works fine. But there is one thing that I want to change. The navbar of the website is fixed and when scrolling to sections, the beginning of the section is not visible. So I want to scroll to the target – 100px.
I tried this here, but it did not work:
$(‘.page-scroll-tk’).on(‘click’, function (f) {
f.preventDefault();
var target = this.hash;
var $target = $(target);
var $newtarget = $target.offset().top;
var $newertarget = $newtarget – 200;
$(‘html, body’).animate({
‘scrollTop’: $newertarget
}, 1000, ‘swing’);
});(I added a second variable called newtarget, which gets the offset of target. Then I added another variable which gets the $newtarget – 200. Last but not least I added $newertarget as the new target for scrollTop. The original code is here:
$(‘.page-scroller’).on(‘click’, function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$(‘html, body’).animate({
‘scrollTop’: $target.offset().top
}, 1000, ‘swing’);
});Thank you for your time and help!
The page I need help with: [log in to see the link]
- The topic ‘Change offset of page-scroller method’ is closed to new replies.