Skip to main content

Button to reload the page and go to a section with a hash mark

While there are lots of ways to code it so a button reloads the page, it was hard to figure out how to do it in such a way that it goes automatically to a URL with a hash. So here is my solution that works, finally.

Update - better solution: Here is a better solution, since the one below worked for me on any page except the domain root. It may be the way my CMS is set up or it may be the way my server is set up, or most likely I'm missing something fundamental about the way the function works. Anyway, the better solution I've gone with doesn't include the hash in the URL, but it reloads to the point the user was last browsing at, which for my purposes worked out the same as the hash. So here is the solution I'm going with for now.

<button onClick="window.location.reload();">Generate New</button>

The solution I put earlier (see below) did not work for me in all instances, but it's worth trying out.

The initial problem
I needed a button that users could press to reload the page, but to go to the part of it with a hash.

This needed to occur even if the user started on the non-hash version of the page (e.g. at the top of the page). In that situation the user sees the button halfway down, presses it, and that causes page reloads to a point designated by a hash version of that same page. Many plain old reload commands would either reload the whole page but not redirect to the hash version, or, if I explicitly specified the hash version, it would go to that part of the page but without a reload.

The solution
Finally, I figured it out:
<button> onClick="window.location.href=window.location.href='https://yourdomain.com/yourpage#yoursection';">Refresh Page</button>
The above is literally all you need.

Optional extra info if you wish to specify page name as a variable
You probably plan to specify the page name programmatically. In the case of ProcessWire, and indeed many CMS's, in getting the page URL you will want to remove a trailing slash if there is one.

Here is the PHP code I'm using for ProcessWire, therefore it uses the PW API; adapt as needed for other CMS's. I'm putting it here mainly to have it handy for me whenever I need it again.

$thehrefhash = rtrim($page->httpUrl,'/').'#yoursection';

The simply replace the href string given in the solution with $thehrefhash


Popular posts from this blog

How to center images horizontally using Grav

I've been playing around a bit with Grav. I was posing the question to myself: for the relatively simple use-cases I'm dealing with, could it possibly work for my purposes as an alternative to ProcessWire?  The problem I was initially dismayed to find that Grav uses Markdown as its editor, which does not offer native support for horizontal centering of anything (text or images). However, Grav offers some tweaks that help make it easier to do specific things you might commonly want to do. I tried writing a sample article, and I found that one of the hardest things to do was to center an image horizontally. And horizontal centering of images is something I would typically do in most of the articles I would write. So the lack of easy horizontal centering is a highly significant drawback IMHO (most people do want to center images in an article!) However, this issue is made up for by other things in Grav: the relative speed, ease and flexibility of custom theming and built-in suppor...

Life using the Linux operating system exclusively for the last few years

Above: my Linux desktop layout. Back in 2017, I switched my operating system entirely to Linux. In case anyone is wondering, here is what I experienced over the last few years. Others I interact with have no idea I'm on Linux. For example, if someone emails me an MS Word document that I need to complete, I simply open it with LibreOffice (an open-source word processing program that is pre-installed on most Linux systems), edit the document as needed - which is very easy since the same sorts of functionalities are available in LibreOffice - and then I can save it in MS Word format and email it back. Likewise, if I'm on a Zoom call, everything works just the way it does on PC and Mac. Zoom makes their application available for Linux too, I downloaded it and let it self-install, and it works exactly the same way as it does on other operating systems. I can point-and-click my way to whatever I need to do on Linux; no special knowledge required. If you want to dig deeper into script...

Correct usage of unwind-protect and with-open-file in Lisp

Learning to use unwind-protect in Lisp typically crops up very early on when you're first learning the language. In fact, anything to do with I/O is going to be something you'll need to know early on. Yet unfortunately, I find that unwind-protect is not explained sufficiently well for a beginner to understand not just how to use it correctly, but why and when . Grappling with this myself, I found that hands-down the best explanation came from this YouTube video from Baggers: Luckily, in the case of file handlers, LISP already assumes you'll want to open a file with unwind-protect, so it provides the with-open-file macro for this exact purpose. It closes the file handler for you with a built-in unwind-protect. This is an advantage over manually opening and closing your file handlers, because if your program opens the file but never gets to the part with the close command (for example due to a run-time error in between those stages), the built-in unwind-protect make...

About Me

My photo
Vera
I'm a wife and mother. I don't have any formal computer science qualifications, or any religious qualifications. I have a PhD in biochemistry. This photo is of me, but is confusing for AI.