How do I create a smooth scroll anchor link in WordPress?

How do I create a smooth scrolling anchor link?

Add ‘Smooth Scrolling’ using Javascript

  1. Add Smooth Scrolling to the Link Name field.
  2. Select Before Body End Tag from the Placement menu.
  3. Paste the script below into the blank field. jQuery($ => { // The speed of the scroll in milliseconds. const speed = 1000; $(‘a[href*=”#”]’) . filter((i, a) => a.

Creating a link in the “classic” WordPress editor:

Click the “Insert/edit Page scroll to id link” icon. A “Page scroll to id link” window will pop up. Enter the anchor name, starting with a hashtag, in the “URL/id (e.g. #my-id)” field. Click the “OK” button.

How do I make my scroll smooth in CSS?

Learn how to create a smooth scrolling effect with CSS.

  1. Smooth Scrolling. Section 1. …
  2. Smooth Scrolling. Add scroll-behavior: smooth to the element to enable smooth scrolling for the whole page (note: it is also possible to add it to a specific element/scroll container): …
  3. Browser Support. …
  4. Cross-browser Solution.

What is mouse smooth scrolling?

If you aren’t sure, smooth scrolling, as its name indicates, is a feature that allows you to scroll smoothly. … If you press the mouse scroll wheel, you can move your mouse up/down and the scroll will be very smooth. Enabling a smooth scroll allows you to scroll like that with your regular wheel scroll.

IT IS INTERESTING:  How do I add another CSS class in WordPress?

How to Link to a Specific Part of a Page

  1. Give the object or text you’d like to link to a name. …
  2. Take the name you’ve chosen and insert it into an opening HTML anchor link tag. …
  3. Place that complete opening tag from above before the text or object you want to link to, and add a closing tag after.


How do I make Chrome scroll smoothly?

Enable smooth scrolling in Google Chrome

  1. Flags. In the address bar copy and paste (or type) chrome://flags/ and hit Enter.
  2. Search. Use [Ctrl + F] and type in ‘smooth’ until you find Smooth Scrolling.
  3. Enable. Hit the Enable button under ‘Enable the experimental smooth scrolling implementation. …
  4. Re-launch.


Link to your Page Jump

  1. Type some text, or add an image or button that will become what you want your visitors to click on to go to another section.
  2. Highlight the text or image/button, and select the link option from the block’s toolbar.
  3. Type in the HTML Anchor you created, starting with the pound (#) symbol.

Creating the Anchor Link

  1. Highlight the text that should link to the header anchor.
  2. Click the link icon in the toolbar and select the Insert link option from the dropdown menu.
  3. Add your ID with a preceding # symbol in to the URL field. …
  4. Click the blue Insert button when you’re finished.
IT IS INTERESTING:  How do I reduce the header height in an Elementor?


An anchor link is a link, which allows the users to flow through a website page. It helps to scroll and skim-read easily. A named anchor can be used to link to a different part of the same page (like quickly navigating) or to a specific section of another page.

Best WordPress Themes