• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Page jumps not aligning properly

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Page jumps not aligning properly

This topic is: resolved

Tagged: alignment, page jump, table of contents

  • This topic has 3 replies, 2 voices, and was last updated 7 years, 5 months ago by hickboy.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 18, 2018 at 4:23 pm #215512
    hickboy
    Member

    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/
January 18, 2018 at 4:36 pm #215514
hickboy
Member

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

January 19, 2018 at 9:12 am #215544
Victor Font
Moderator

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?

January 23, 2018 at 1:10 pm #215661
hickboy
Member

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

  • Author
    Posts
  • Viewing 4 posts - 1 through 4 (of 4 total)
    • The topic ‘Page jumps not aligning properly’ is closed to new replies.

    CTA

    Ready to get started? Create a site or shop for themes.

    Create a site with WP EngineShop for Themes

    Footer

    StudioPress

    © 2025 WPEngine, Inc.

    Products
    • Create a Site with WP Engine
    • Shop for Themes
    • Theme Features
    • Get Started
    • Showcase
    Company
    • Brand Assets
    • Terms of Service
    • Accptable Usse Policy
    • Privacy Policy
    • Refund Policy
    • Contact Us
    Community
    • Find Developers
    • Forums
    • Facebook Group
    • #GenesisWP
    • Showcase
    Resources
    • StudioPress Blog
    • Help & Documentation
    • FAQs
    • Code Snippets
    • Affiliates
    Connect
    • StudioPress Live
    • StudioPress FM
    • Facebook
    • Twitter
    • Dribbble