Highlighted

Back button and Top of page conflict error in code

Explorer ,
May 16, 2019

Copy link to clipboard

Copied

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>

<html lang="zxx">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Untitled Document</title>

!--Nav Bar Start-->

<a id="search-target"></a>

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

<!--Nav Bar End-->

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<!--copyright date start-->

<a href="#search-target">

<div class="font eventify-location-admin"><span style="color:#2499FB">- TOP</span></div></a>

<!--copyright date ends-->

</div>

</html>

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

Views

359

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Back button and Top of page conflict error in code

Explorer ,
May 16, 2019

Copy link to clipboard

Copied

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>

<html lang="zxx">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Untitled Document</title>

!--Nav Bar Start-->

<a id="search-target"></a>

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

<!--Nav Bar End-->

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<!--copyright date start-->

<a href="#search-target">

<div class="font eventify-location-admin"><span style="color:#2499FB">- TOP</span></div></a>

<!--copyright date ends-->

</div>

</html>

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

Views

360

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 16, 2019 0
Adobe Community Professional ,
May 16, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 16, 2019 1
Adobe Community Professional ,
May 16, 2019

Copy link to clipboard

Copied

I noticed:

!--Nav Bar Start-->

should be

<!--Nav Bar Start-->

Paul-M, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 16, 2019 0
Adobe Community Professional ,
May 16, 2019

Copy link to clipboard

Copied

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, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 16, 2019 0
Adobe Community Professional ,
May 16, 2019

Copy link to clipboard

Copied

Tim,

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 16, 2019 0
Adobe Community Professional ,
May 16, 2019

Copy link to clipboard

Copied

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>

<!--Nav Bar Start-->

<a id="search-target"></a>

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

<!--Nav Bar End-->

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<!--copyright date start-->

<a href="#search-target">

<div class="font eventify-location-admin"><span style="color:#2499FB">- TOP</span></div>

</a>

<!--copyright date ends-->

</body>

</html>

Paul-M, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 16, 2019 1
Explorer ,
May 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 17, 2019 0
Adobe Community Professional ,
May 17, 2019

Copy link to clipboard

Copied

That's how browser history works.

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 17, 2019 1
Adobe Community Professional ,
May 17, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 17, 2019 1