Learn how to easily add anchor links to WordPress, including smooth-scroll effect. Works in Gutenberg or the Classic Editor. Plus, how to fix your header overlapping the anchor.
We'll cover:
- How to add anchor links
- How to make an element an anchor target
- How to create a scroll-offset for a better UX
- How to add smooth-scrolling using pure CSS (no javascript or plugin required)
- How to link to your anchors from another page
Creating anchor links in WordPress is pretty easy, especially in the new Gutenberg block editor. If you haven't made the switch to Gutenberg yet, you should. It's much better.
🠺🠺 Learn Gutenberg: [ Ссылка ] 🠸🠸
---------------------------------------------------------------------------
Video Chapters
---------------------------------------------------------------------------
0:00 - Intro
0:15 - Create an anchor link
0:58 - Creating an anchor target ID
2:18 - Fix anchor link offset (top of screen)
3:33 - Scroll-margin-top CSS rule
5:26 - Add Smooth scroll to anchor links
6:06 - Anchor links in WordPress classic editor
7:03 - Link to anchor from another page or website
7:26 - Outro
🠺🠺 How to add anchor links: 🠸🠸
1. Create a link with a hashtag, like: #anchorlink
2. Add an id to an element using the name: 'anchorlink'
For the classic editor: you can edit the 'id' of an element by using the text editor, rather than the WYSIWYG visual editor.
If you don't like the anchors jumping to the very top of the screen (or being overlapped by your fixed header) you can create a scroll margin using CSS. This will create margin between the top of the screen and your anchor target.
Example CSS: (this rule sets a scroll-margin for any element with an ID)
*[id] {
scroll-margin-top: 50px;
}
You can also add a smooth-scroll animation, using pure CSS. You don't need javascript or another plugin. It's well-supported in the recent versions of major browsers but may not work in older browsers (but won't break anything).
Important: Make sure to use the media-query to allow users to opt out of smooth-scroll. Some users can get motion sickness from web elements that move.
