{"id":7095,"date":"2026-04-12T20:07:00","date_gmt":"2026-04-13T01:07:00","guid":{"rendered":"https:\/\/www.ragesw.com\/blog\/?p=7095"},"modified":"2026-04-12T12:21:13","modified_gmt":"2026-04-12T17:21:13","slug":"everwebs-tale-of-two-scroll-positions","status":"publish","type":"post","link":"https:\/\/www.ragesw.com\/blog\/2026\/04\/12\/everwebs-tale-of-two-scroll-positions\/","title":{"rendered":"EverWeb&#8217;s Tale of Two Scroll Positions"},"content":{"rendered":"\n<div class=\"wp-block-cover\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"611\" class=\"wp-block-cover__image-background wp-image-7099 size-full\" alt=\"EverWeb's Scroll Position\" src=\"https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2026\/04\/EverWeb-Scroll-Position.jpg\" style=\"object-position:50% 0%\" data-object-fit=\"cover\" data-object-position=\"50% 0%\" srcset=\"https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2026\/04\/EverWeb-Scroll-Position.jpg 1000w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2026\/04\/EverWeb-Scroll-Position-300x183.jpg 300w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2026\/04\/EverWeb-Scroll-Position-768x469.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\" style=\"background-color:#7a786e\"><\/span><div class=\"wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained\">\n<p class=\"has-text-align-center has-large-font-size\"><\/p>\n<\/div><\/div>\n\n\n\n<p>If you have ever wanted to hyperlink a button, or a piece of text, in your site to a specific point on a page, <a href=\"https:\/\/everwebapp.com\" target=\"_blank\" rel=\"noopener\" title=\"\">EverWeb<\/a>&#8216;s Scroll Position is the feature that you will need to use. Hyperlinking in this way is like a ship dropping an anchor. The ship is always anchored to the anchoring point. The same is true when you use Scroll Position. You use one object on a page as the anchoring point to which other objects, such as a button or piece of text, are tethered to. <\/p>\n\n\n\n<p>Introduced back in EverWeb 2.6, this was a time when EverWeb only supported Fixed Width page layouts. When Responsive Page Layouts were introduced to EverWeb in version 2.8, there was a need to introduce a new form of Scroll Position. This came when Set Shape as Scroll Position was added to EverWeb in EverWeb 3.2 in April 2020. <\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">A Tale of Two Scroll Positions<\/h2>\n\n\n\n<p>So you may be wondering, why do we need two different types of Scroll Position? Essentially, we only really need one type of Scroll Position, that being Set Shape As Scroll Position. The reason being that this type of Scroll Position can be used on all page layout types, both Fixed Width and Responsive. <\/p>\n\n\n\n<p>The other Scroll Position type, Insert Fixed Scroll Position, can only be used on a Fixed Width Page Layout but remains so that you if you are created a Fixed Width website using Scroll Position before EverWeb 3.2 then you are are still supported. <\/p>\n\n\n\n<p>Essentially Insert Fixed Scroll Position remains for legacy purposes. It is also visually very distinctive is uses a horizontal line to easily show you where the Scroll Position is located on the page. For those using the Centered Layout page layout type it&#8217;s very easy to use.<\/p>\n\n\n\n<p>With all this EverWeb history in mind, let&#8217;s look at the two Scroll Position versions in more detail&#8230;<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Scroll Position For Fixed Width Pages<\/h2>\n\n\n\n<p>As mentioned above, EverWeb introduced Scroll Position with EverWeb version 2.6 back in December 2017. At this tine EverWeb was designed for use only with Fixed Width pages in mind, i.e. the Centered layout and Left Aligned layouts. For long time EverWeb users, there was a third page type that existed at the time called Dynamic. In reality the Left Aligned and Dynamic page layout types were not used, so the Centered Layout type was the one we all used. <\/p>\n\n\n\n<p>The addition of the Scroll Position feature also meant that the feature was also added to EverWeb&#8217;s Toolbar. It still remains there to this day, but also can be accessed using the Insert-> Insert Fixed Scroll Position menu option.<\/p>\n\n\n\n<p>When you add this type of Scroll Position, it will be added to the page as a blue line across the page. You can drag and drop the line to where you want it placed. Each Scroll Position that you add also has a unique name on the page that it is on. You can easily change the name, just select the Scroll Position then change the name by clicking on the Widget Settings tab in the Inspector Window then editing the Unique Name field. By default, the name given to the Scroll Position is the pixel point on the page that the Scroll Position is initially located at. <\/p>\n\n\n\n<p>To use the Scroll Position, select the text in your button, or piece of text you want to use, then go to the Hyperlinks Inspector. Check the box &#8216;Enable as Hyperlink&#8217;. The Link To field should be set as &#8216;One of My Pages&#8217;. The Page field should either be set to &#8216;Current&#8217;, or the name of the page the Scroll Position is located on. This means that you can link to positions on other pages in your site. Once you have completed these steps, test your page using the Preview button in the Toolbar.<\/p>\n\n\n\n<p>If you want to delete the Scroll Position, simply highlight it, then press the Backspace key.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Scroll Position For Responsive and Fixed Width Pages<\/h2>\n\n\n\n<p>Set Shape as Scroll Position debuted in EverWeb 3.2 and as its name implies, you add your Scroll Position to an object on the page. To use this feature, select the object that you want to scroll to. This could be, for example, a shape, TextBox or even a widget such as the FlexBox widget. Remember that you can use this type of Scroll Position on either a Fixed Width or Responsive Page. After selecting the object that you want to use, go to the Scroll Position button in the Toolbar. Select the &#8216;Set Shape as Scroll Position&#8217; option. You will see that a blue anchor symbol added to the selected object. You will also be asked at the same time to name the Scroll Position with a name that is unique to the page. <\/p>\n\n\n\n<p>You can then use the Scroll Position in the same way as outlined in the section above for Insert Fixed Scroll Position. <\/p>\n\n\n\n<p>If you want to rename the Scroll Position, select the object that uses the Scroll Position. Next, go to the Shape Options tab and open the Scroll Position section if it is not already open. Edit, or enter a new name. If you want to delete the Scroll Position just leave the field completely empty.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Displaying Scroll Position<\/h2>\n\n\n\n<p>When using Scroll Position, you will either see a blue horizontal line if you used Insert Fixed Scroll Position, or a blue anchor symbol in the top right hand corner of the object if you used Set Shape as Scroll Position. The Insert Fixed Scroll Position visual indicator will always display. When using Set Shape as Scroll Position the anchor symbol will not display if you have set Window-> Show Layout to &#8216;Hide Layout&#8217; in which case it will not be visible.. <\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Which Scroll Position To Use?<\/h2>\n\n\n\n<p>Our recommendation is to use Set Shape as Scroll Position. The main reason for this is that even if you are currently working in a Fixed Width environment, you may at some stage migrate to a Responsive Page Layout, so you will be working consistently at all times just using one style of Scroll Position. No frustration or relearning needed! <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">EverWeb on Social Media<\/h2>\n\n\n\n<p>You can also find EverWeb&nbsp;on&nbsp;the following social media platforms:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.facebook.com\/everwebapp\/\" target=\"_blank\" rel=\"noreferrer noopener\">Facebook<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/flipboard.com\/@everweb\/everweb-m8efhguby\" target=\"_blank\" rel=\"noreferrer noopener\">Flipboard<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.youtube.com\/channel\/UCSse-zNlNxTyo7g8JwuVzOg\" target=\"_blank\" rel=\"noopener\" title=\"\">YouTube<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/x.com\/everwebapp\" target=\"_blank\" rel=\"noopener\" title=\"\"> X<\/a><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.instagram.com\/everwebapp\/\" target=\"_blank\">Instagram<\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/www.facebook.com\/everwebapp\/\" target=\"_blank\"><\/a><br><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you have ever wanted to hyperlink a button, or a piece of text, in your site to a specific point on a page, EverWeb&#8216;s Scroll Position is the feature that you will need to use. Hyperlinking in this way is like a ship dropping an anchor. The ship is always anchored to the anchoring [&hellip;]<\/p>\n","protected":false},"author":844,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[252,247,2,11],"tags":[838,709,1080,821],"class_list":["post-7095","post","type-post","status-publish","format-standard","hentry","category-everweb-software","category-everweb","category-software","category-web-site-optimization","tag-everweb-for-mac","tag-everweb-for-windows","tag-insert-fixed-scroll-position","tag-set-shape-as-scroll-position"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/7095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/users\/844"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/comments?post=7095"}],"version-history":[{"count":4,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/7095\/revisions"}],"predecessor-version":[{"id":7100,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/7095\/revisions\/7100"}],"wp:attachment":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/media?parent=7095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/categories?post=7095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/tags?post=7095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}