- This topic has 3 replies, 2 voices, and was last updated 7 years, 1 month ago by
.
-
Posts
-
I am building a site at http://www.tmh.place, using MinimumPro.
Please see the page https://tmh.place/poultry/breeding/breeding-our-own/. I have configured a table-of-contents list up top with links (in the format:
- Breeding in Practice
) to the relevant topic headings below.
I configured headers as destinations for the links, in the format:
<h2>Breeding in Practice</h2>I have also configured with the destination positioned *above* the header:
<h2>Breeding in Practice</h2>Doesn't matter which of these configurations I use, when I click on a link in the list of topics, the jump is not to the destination header itself, but into the text several lines below it.
I need to resolve this issue, since this site will have dozens of long pages requiring this sort of linked-list table of contents at top of page. Thanks if you can help.
~Harvey
https://tmh.place/poultry/breeding/breeding-our-own/Well, my post is a bit of a scramble--I didn't realize I had to escape the coding for links, with weird and partly incomprehensible results. But if you check the linked URL you'll certainly see the problem. Thanks. ~Harvey
When you scroll to an anchor link on a page, the browser will always scroll to the top of the view window. In your case, you have a fixed header that sits above any other content on the page. This means the top of the view window is underneath the fixed header. To fix this, you have to apply an offset that is calculated on the fly with jQuery. The offset is equal to the height of the fixed header. To complicated, if you have the WordPress admin bar displaying at the top of your screen, you have to add an additional 32px to the header offset, otherwise you'll miss the mark while you're developing. This snippet of jQuery code will fix your problem. Create a file and name it my-scroll.js. Save it to your child theme's js directory. Enqueue the file in functions.php and you should be good to go.
Not sure why, but the code wrapper wasn't working on the jQuery script. You can get it from this gist: https://gist.github.com/vfontjr/c5c6815da7f79bafd5616b80628a5272
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?Victor, thank you so much for your help with this! I created the file in js directory as suggested. I know very little php, but just did "monkey see, monkey do" to enqueue my new script, using the enqueue line for an existing script (responsive-menu.js) as model. Then when I gave it a test run--pow!--page jump behavior exactly as desired.
There will be a lot of "long-scroller" pages on this site, so getting this problem resolved was critical. Thanks again.
~Harvey
- The topic ‘Page jumps not aligning properly’ is closed to new replies.