Back button and Top of page conflict error in code

Report · May 16, 2019

I've got a problem with a back button and a GOTO TOP of page button.

From test.html I click on a link to open test2.html

* When I scroll down to the bottom of the page of test2.html and click on the' TOP' button link it goes to the top of the page which is fine

* BUT when you click on the 'BACK' button which part of a nav bar it goes to the bottom of the page instead.

* If I scroll up, the page and then click the BACK button it then goes to the previous page ie test.html

Not sure how to get around this as I need both a back button and link to go to top of page ??

Hope you can help

Tim

(I have just attached the second-page test2.html code below and not the page it goes back to which in the code goes back to test.html)

--------------------

<!doctype html>

<head>

<title>Untitled Document</title>

!--Nav Bar Start-->

</div>

</html>

----------------------

Report · May 16, 2019

It doesn't sound to me like anything is technically wrong.

Your "Back" script is using the browser's History, which is just browser events stored as a chronological list. When the user clicks the "Back to Top" link, even though you're on the same page, it adds an event to the History.

When the "History minus 1" script is invoked (your Back button), it goes to where the user was when that event was written to the History list.

If you click the "Back to Top", then "History -1" it will correctly (however unwanted) bring you to where you were before Back to Top was invoked.

If you don't click Back to Top (and don't write that event into the History list) it will bring you back to wherever you were when the most recent History list item was created (in your example, the previous page).

The best fix, in my opinion, is not to add "Back" links into your page at all. Viewers understand how their browser's Back function works. there's no need to confuse the issue by placing another Back button within the page itself.

Report · May 16, 2019

I noticed:

!--Nav Bar Start-->

should be

Paul-M - Community Expert

Report · May 16, 2019

Doesn't seem to be a closing head tag or opening and closing body tags either?

Either copy and past didn;t work correctly or you need to look at it

Paul-M - Community Expert

Report · May 16, 2019

Tim,

Why do you need a BACK button? The browser takes care of that.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 16, 2019

Ammended ansd tested at this end, confirming it works:

<!doctype html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
</head>
<body>

<a id="search-target"></a>
<li class="active-top-menu"><a HREF="javascript:javascript:history.go(-1)" class="dark-grey-panel">Back</a></li>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<a href="#search-target">
<div class="font eventify-location-admin">- TOP</div>
</a>

</body>
</html>

Paul-M - Community Expert

Report · May 17, 2019

No, that code does not work!

http://www.tcdesignstamford.co.uk/test.html

1) Click on the link above - goes to page 1

2) one page 1 press - Click Here - button ( which goes to page 2)

3) Scroll down to the bottom of page 2

4) click on TOP - button which takes you to the top of the page

5) Then click on Back button which has a link to go to page 1 ( but instead it goes to the bottom of the page)

----

But when you click on http://www.tcdesignstamford.co.uk/test.html

which goes to page 2 and then click on BACK it goes to page 1

Does anyone know how to get around this, please?

Thanks

Tim

Report · May 17, 2019

That's how browser history works.

Use direct links to target page and location instead of history.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 17, 2019

Rather than using the <a href="#search-target"> link for your back to top, try this...

Window scrollTo() Method

When set to 0,0 this method shouldn't be recorded into the browser's History and bring you to the top of the page. That way, when you invoke the "History -1" script you have, it won't return the user to the scroll to top link that is being recorded otherwise.

Adobe Community

Back button and Top of page conflict error in code