2

Easiest way to explain it is if you have a look at the site - haloespresso.com.au/working/

If you click the "menu" option in the top menu, it scrolls to the menu id #pg-9-4, which is what I want. On the other pages, the menu is slightly different and the same link is changed to link to the home page with #pg-9-4 added to the end of it. The point here is clearly to get the link from another page to open the home page but scroll to the menu part of it. I don't even need it to smooth scroll or anything, just go to that spot. It looks like it does go there for like, one frame, as it's loading, but it keeps jumping to the top. It's simply beyond me to try and figure out what is causing it to lose this basic HTML (afaik) functionality and keep forcing me to the top of the page...

Any help would be really great, as I'm a bit of a noob when it comes to anything other than html/css and simple jquery.

Skarekrow73
  • 21
  • 4
  • the solution would be creating a function that detects the page hash and fires the scrolling function... – Aziz Feb 06 '16 at 08:54
  • Any chance you could help me do that? I'm not really sure where to start. Also, there are obviously already scripts running on the pages, it being a fancy wordpress theme and all, so I don't want to break everything messing around with stuff I don't fully understand. – Skarekrow73 Feb 06 '16 at 09:17
  • I did try adding this script (pretty generic so I figured it would maybe work): http://stackoverflow.com/questions/11820055/link-to-different-page-jquery-scroll-to-specific-anchor By following the advice in this thread: http://stackoverflow.com/questions/11159860/how-do-i-add-a-simple-jquery-script-to-wordpress But it didn't work and just broke some of the elements on the page, so I undid changes to the php and deleted the js file I created. – Skarekrow73 Feb 06 '16 at 09:20

2 Answers2

0

Just append the anchor to the end of the link.

Simply insert a link like:

<a href="/someotherpage.html#section4">Link to section on another page</a>

Edit: Just noticed you're not getting this to work. What do your links look like, and what's the HTML with the ID on the target page?

Ted Nyberg
  • 7,001
  • 7
  • 41
  • 72
  • On the home page the menu link is just "#pg-9-4" and on every other page a different menu is used with a direct link that follows the correct format "http://haloespresso.com.au/working/#pg-9-4" – Skarekrow73 Feb 06 '16 at 09:12
  • I asked the support team for the theme and the response I got after a few messages back and forth was "There is not problem with HTML of theme. Sections of one-page juts work when on this page, it means when you on another page, you can not link right to this section, just load to id of one-page. So that it loads to top of one-page when click on “Menu” to be naturally." As is obvious, English is not their first language. I figured after being told that there is no issue with the HTML of the theme that there was no way they were going to be able to understand my question, so here I am. – Skarekrow73 Feb 06 '16 at 09:16
0

Try this jQuery code:

$(document).ready(function() {
   function hashScroll() {
      // get URL Hash
      var hash = window.location.hash;

      // check if hash is set and not empty
      if (hash != '') {
         // scroll to hash ID after 10ms delay
         setTimeout(function() {
            $(document).scrollTop( $(hash).offset().top );
         }, 10);    
         // debugging
         console.log(hash);
         console.log('offset:'+ $(hash).offset().top );
     }  
   }
   hashScroll(); // fire hash scroll function
});

Explanation:

This function will capture the URL hash (www.example.com/#hash), checks if it's not empty and then scrolls the page to the element with the ID which matches the hash after 10 ms. The delay is there to make sure browsers don't mess up the loading process.

Aziz
  • 7,685
  • 3
  • 31
  • 54
  • Thanks heaps! Just to confirm, to get this to work I'm putting it in a js file and then doing this: http://stackoverflow.com/questions/11159860/how-do-i-add-a-simple-jquery-script-to-wordpress ...to get it to actually function? – Skarekrow73 Feb 06 '16 at 09:21
  • yes you can do that, tho I'd recommend placing it in one of the script files you have already to reduce HTTP requests, for example you can add this code to http://haloespresso.com.au/working/wp-content/themes/resca/assets/js/main.min.js?ver=4.4.2 – Aziz Feb 06 '16 at 09:28
  • Do I still have to mess with the php then? Or not? – Skarekrow73 Feb 06 '16 at 09:49
  • Yeah, either it isn't working or I'm doing something wrong. Really sorry, I'm pretty inexperienced when it comes to scripts and wordpress... – Skarekrow73 Feb 06 '16 at 10:23
  • we should probably chat and I'll help you set it up – Aziz Feb 06 '16 at 12:03
  • Hey, sorry it's taken me so long to get back to this. Would really love the help if you're still offering. I tried clicking the link but I guess it's expired or something... – Skarekrow73 Feb 23 '16 at 01:25
  • A new development is that I've found that this works as intended on this site in Safari. Only on Chrome is it showing the correct position briefly, but then jumping to the top of the page. What the heck? – Skarekrow73 Feb 23 '16 at 14:18