Explanation of Scroll to id to move to a specific element on the page when a specific button is clicked

If you own a WordPress website, providing an easy and fast browsing experience for your site users is essential, as well as providing best practices that increase the conversion rate on your site. One of these procedures is the Scroll to id procedure, which allows the visitor to move to a specific element when they click on a button or a specific element at the beginning of the page. This is a useful step, especially on long pages. In other words, if your landing page contains 8 parts, and in the first part of the page you ask the visitor to register in a specific form in the first part of the page, then you ask him to click on the word (see more) to click on it to move to the second section of content, which contains the registration form, in order to ensure that he is not distracted among the rest of the parts of the landing page. In this article, we will explain three simple ways to add the feature of moving from the first element (button, word, image, etc.) when the visitor clicks on it, he will move smoothly to a second element (whether it is a title, article, image, price table, etc.) within the same page, and what is known as Scroll to ID.

We will explain this using 3 methods: Using the (Page Scroll to ID) add-on Using (Html ​​Anchor) Using site building tools. Let us review these methods by achieving the same value but in different ways by giving the example using a perfume selling website as follows: 1. Using the (Page Scroll to ID) add-on The Page Scroll to ID add-on, which allows the page to scroll to the identifier (element), is a fully featured plug-in, instead of the “jumping” behavior in the browser with a smooth scrolling motion, when clicking on the links designated for that.

It provides all the basic tools and advanced functions for single-page websites, such as page navigation from top to bottom, etc. Features such as: Adjustable scroll animation duration and relief (more than 30 relief types) Link and target highlighting via ready-to-use CSS classes Vertical and/or horizontal scrolling Scrolling to and from different pages (scrolling to the target ID when the page loads) Inserting the link and target ID buttons into another visual editor It is an add-on that contains this feature. Provide this feature for free or purchase the add-on to get higher features. It has been downloaded more than 100,000 times and has received a rating 

Almost 5 stars 

Install the plugin from the sidebar of your site's control panel. Click on the Plugins section, then Add New, then in the search box type the keyword (Page Scroll to ID). After the add-on appears, click Install Now, then Activate. Add-on settings: There are many settings for this add-on, such as latency, speed, and format. Which is well configured (it is better to leave the automatic settings).

But we will make sure of only two points: Make sure that the Selector is written in the following format: a:not() Then in the Advanced Options settings: where we will make sure that the “Prevent other scripts from processing links to this extension” option is marked correctly, as in the picture. Then we will click on the “Save Changes” option. Determining the goal (Creating Targeting ID) To understand the steps of determining the goal that we want to reach through quick navigation, we will take a simple example, which is the “About us” page.

We will first go to the “Pages” option in the control panel, then the “About Us” page. Of course, you can choose which page you want to access and customize any element of it and follow the same steps as follows: On the About Us page of your site, select the element that you want to link to the quick navigation feature, then click on Add Component. In our example in the picture, we chose the first title, “Mission,” as in the picture. You will see an options page on the left of the screen that includes both the “blocks” and “Patterns” options. From the Blocks options, we will choose the addition option (Scroll to ID) as in the picture. After clicking on Add, a space will appear to write the name. Choose a name for this item (if the name has more than one word, do not leave spaces between the words, but use connecting movements such as separator marks “-”). In the same way as before, select any second item on the page and click in front of it, then add the addition block. After you finish selecting the items, click Update as in the picture.

Adding the selected items to the list After selecting the items that you want to link to the Jump feature, we will return to the control panel on your site, and from the Appearance section we will click on Menu. Among the tabs that will appear to us, we will click on the “Custom Links” heading, as in the picture. In the “Link” box, we will write the symbol (#) + the same definition or title that you chose for the item, in our example (mission#).

In the Link Text box, we will write the name you would like to appear in the list. Then choose Show in the Primary Menu, and finally click on the “Add to Menu” icon as in the following images. After adding the items to the list, arrange their location (click - drag - release) and then click Save Menu. After completing all the previous settings, we will make sure that the quick navigation feature works. We will open the About Us page, to which we added the feature in our example, with any browser.

You will notice that icons appear at the top of the page for items or titles to which we have added the jump feature, as in the picture. We will click on the headings “Mission” and “Vision” to ensure that the quick navigation feature within the page works effectively. It must also be that the process of moving from the head of the list to the selected item is in the required speed and form. 2.

Use Html Anchor to navigate to a specific item. If you own a blog and publish long articles on it, taking advantage of the quick navigation feature for the main article titles will be a great step and addition to your site, so that the reader can access the sections of the article he wants directly after clicking on the title at the top of the page. We will now talk about some presets within the WordPress article editor that are designed to customize the quick navigation feature on the pages of websites and blogs specialized in publishing articles, especially long and content-heavy articles. There are two basic ways to add the quick navigation feature through the WordPress post editor, which are: Adding the ID. In this method, we will navigate to the “Posts Section,” then “All Posts,” and we will click on the “Edit Article” option, as in the picture.

We will now choose, for example, one of the main titles in the article, as shown in the picture, then we will click on the links icon (Add a link). A window will appear asking us to add a link to that title. What we have to do now is write the “ID” for the title, which is the title itself preceded by the symbol (#) of the title itself, but without spaces between the words, but rather put (-) between them, as in the picture, then we will press (Enter). We must also make sure that the “open in new tab” option is not activated because it will lead to opening a tab. New in the visitor's browser when clicking on one of the article titles, which is of course not suitable for visitors. 2. anchor html The second way to add the scrolling feature to another element comes by relying on the component editor, by going to the article editor as in the previous addition.

Now we will choose the main target title from the quick navigation feature. Here, instead of choosing the “Links” symbol, we will move to “Advanced Options” which you will find to the right of the article editor. We will write in the “HTML anchor” box the name of the main title without commas with (-) but without putting the (#) symbol, then we will click on (Update) as in the picture. 3. Ensure the effectiveness of the feature. After setting up the quick navigation feature through the WordPress article editor in one of the two previous methods, we will move to viewing the article (Preview), where we will be shown a preview of what the final article will look like.

Now we need to make sure that the link on the main title we worked on will take us to the paragraph of that title. 3. Using website building tools (Visual Builders) This method is very suitable for website owners who 

They use website building plugins pre-installed on their sites, so you can create a jump-through feature with ease. In this explanation, we will add the feature of quick navigation to the item (Essential Collection) from the main menu at the top of the site (Main Menu). After going to the editing page using Mentor, choose the part to which you want to add the jump feature, click on the editing section (symbolized by a group of dots).

Choose Advanced Settings in the tab section. Write the Css ID for this part of the page (such as: essential-collection, do not put spaces between words, and you can use – or _) Click on (Update) Add a new menu: We will now return to the control panel of your site, and from the Appearance section we will choose “Menu,” and from the menu items we will choose Custom Links. In the Link box, type the symbol (#) with the same identification that you chose in the Css ID, for example: (essential-collection#). In the “Link Name” box, type the name you would like to appear in the list.

Now all you have to do is select “Show” in the Primary Menu, then click “Add to Menu” as in the following image. After adding the new menu, arrange its location, then click on Save Menu. After completing all the settings, enter the main page of the site, which will appear to the customer, and click on the menus that you added to ensure that the quick navigation feature is activated within the page, and that is all.

Thus, we have detailed three of the most prominent and simplest methods used to activate the Scroll to ID feature in simple steps. All methods lead to the same result, and you can choose the method that suits you and you will not face any problems.