Taking these steps will allow the scroll to come to that area, but 5px higher than it originally did. The “bottom” value can be changed to your liking.
You can view the steps I took in the inspector at the following short video:
If you add more space between sections you will see that the scroll will stop right above the blue section. The additional height is needed so that the browser can scroll to that section - previously it was being stopped because it had reached the bottom of the page.
The following video shows me adding more height (100vh) to the sections, then testing the interaction:
@micahryanhtml . . . you solution works if i make the sections height to 100Vh. but some of my sections are smaller than this height and this solution doesn’t work. Is there any other way to fix this issue. (will interactions work for this issue?) . Also, i have to select write Vh in height (only %, px and auto options available). Tia.
Sure, you can use different heights. The solution I provided was used as an example because the browser needs room to scroll.
For example, if you select to scroll to an ID that is near the bottom of the page - it will not be able to scroll directly to that ID because it cannot scroll pass the available content in the viewport.
A good example to think of is having a link to the footer of your page - because the footer will typically not take up 100% of the viewport - the content above the footer section will be visible.
@micahryanhtml . . . i tried to implement your solution In my real website page. But somehow its not working there. I added Div element above each section with Position:absolute, bottom padding :5px and Divid = sectionid. but its not working.
It is not published yet. Please check AmberAnaliticsCopy Page.
Thanks a ton for your immediate reply. I tried applying these changes to Div - position: relative, bottom:35 and Id=section Id. So it also worked. but Please let me know which is good method for long term use?
