#here

I added this line to my Comments section over a year ago…


	<div id="here"></div>

The idea was that when someone clicks on the Navigation Bar and the page is reloaded, the view port stays in basically the same place so you don’t click on “Next” and then have to scroll back to where you are at.

Well, now I decided to put a Navigation Bar at the top and bottom of my Comments section.

So that a user stays where they are located when they click on the bottom Navigation Bar, I added this code at the bottom of my Comments section…


	<div id="here2"></div>

And the PHP module that creates my Nav bar now have two sets of code that create the Top and Bottom Nav Bars respectively.

Unfortunately my Bottom Nav is moving up towards the top of the page.

Is #here a keyword or something?

How do I tell my code that I want a “Top HERE” and a “Bottom HERE”?? :-/

Sincerely,

Debbie

P.S. I am just using HTML, CSS and PHP. (No JavaScript please!!)

Hi,

If you are navigation to an element using a fragment identifier (e.g. <a href=“#here” …) then the browser will scroll that element to the top of the viewport so that the element you wanted to navigate to is the starting point for that page. However, the browser will only move that element to the top of the viewport if there is a page full of content under that element.

If you navigate to an element near the bottom of the page the browser will scroll it into view and keep scrolling upwards until either it meets the top of the viewport or it runs out of content underneath. This means that for an element near the bottom of the document to start with it may only get scrolled upwards a few inches or so.

There is no mechanism to always scroll an element to the top of the page or indeed the bottom of the page without using JS.

Never say never… :wink:

I changed my PHP to create a $navBar_Top and $navBar_Bottom which contain #here and #here2, respectively. And then I moved my #here2 to my Page Footer - because where I had it apparently wasn’t far enough down - and things work perfectly!!!

If you are at the top of the Comments section and click on the Top Nav, you go from page to page without things shifting a pixel.

If you are at the bottom of the Comments section and click on the Bottom Nav, you go from page to page without things shifting a pixel.

:tup:

Did I mention that I did NOT need JavaScript (again)?? :wink:

Debbie

Glad you got it working how you wanted :slight_smile: