0

Over the past month I've been working on a new website which is based on a WordPress theme. The site is a pseudo one-page design, where the primary page serves as the main page for information. However, it also has a gallery where you can enter several individual portfolio projects - which effectively takes you to another page (and therefore the use of "pseudo"). So that's the design and layout of the site...

On the main page of the site I added anchor links to the various sections for ease of use, which will scroll/take the user to the desired section of choice, by simply clicking on the navigation menu. The links all work fine, but a problem arises when you've entered and returned from a portfolio project.

The problem:

After having clicked on an anchor link, a hashtag is then added to the URL "www.example.com/#anchor". If the user enters a different page and then returns the hashtag/anchor is then reactivated and scrolls to the linked section. This is a real pain and anything but user-friendly, since it is taking the user away from where it was.

I've been trying as many Javascript/JQuery codes I can find, many from this very site, but none has managed to solve the problem... I need to find a way to effectively remove the hashtag after use so the URL is left with only "www.example.com" again.

EDIT: Forgot to add that I also need to be able to click on the navigation menu whilst in a portfolio project and having the menu call to open the main page and take the user to the section of choice.

Does anyone have a solution? I am all out of ideas here.

Please also tell me where to add the piece of code if you are so kind to help.

Thank you!

ViraLicious
  • 1
  • 1
  • Remove hashtags, just add an ID to the clicked link and then to the target, then on click just shoot to that ID on the page (google how to scroll to javascript/jquery) – clearshot66 Sep 24 '18 at 17:29
  • can i see the page with the problem to understand what you are talking about ? – Stakvino Sep 24 '18 at 17:38
  • 1
    Possible duplicate of [How to disable anchor "jump" when loading a page?](https://stackoverflow.com/questions/3659072/how-to-disable-anchor-jump-when-loading-a-page) – Ruzihm Sep 24 '18 at 18:09
  • Thank you for your replies. I have tried to use JS and JQ for that, but for some reason it doesn't seem to work. Tried to paste codes I know work in Raw HTML, Raw Java and in the custom JS/JQ field in WordPress, but none worked. I am starting to think it has something either to do with the order things are being loaded onto the site, and it is therefore related to a hierarchy thing with things being overruled/written - since nothing I do seems to work. Or perhaps I am simply just doing it all wrong... – ViraLicious Sep 25 '18 at 07:03
  • Okay - been playing around with different ways of implementing the scripts I've found, but with no progress. I just tried this one: https://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2 and this one: https://stackoverflow.com/questions/6677035/jquery-scroll-to-element. But none work... I must be adding the JavaScripts wrong or something. – ViraLicious Sep 25 '18 at 17:04

0 Answers0