back to previous page button in footer

Hi there,

is is this the previous page/post in hierarchical order or the last 'page' the user visited ?

Hello David,

I mean the last page the user visited

If you want it to be included in the back to top area ( so appears only on scroll and remains fixed in the corner ) then you could use this PHP Snippet to include a BACK button in the HTML:

add_filter( 'generate_back_to_top_output', 'db_custom_back_to_top_and_back' );
function db_custom_back_to_top_and_back() {
	printf(
	'<div class="generate-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="%2$s" data-start-scroll="%3$s">
		<button class="go-back-button gp-icon" type="submit" value="Go Back" onclick="history.back()">
		<svg viewBox="0 0 330 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M305.863 314.916c0 2.266-1.133 4.815-2.832 6.514l-14.157 14.163c-1.699 1.7-3.964 2.832-6.513 2.832-2.265 0-4.813-1.133-6.512-2.832L164.572 224.276 53.295 335.593c-1.699 1.7-4.247 2.832-6.512 2.832-2.265 0-4.814-1.133-6.513-2.832L26.113 321.43c-1.699-1.7-2.831-4.248-2.831-6.514s1.132-4.816 2.831-6.515L158.06 176.408c1.699-1.7 4.247-2.833 6.512-2.833 2.265 0 4.814 1.133 6.513 2.833L303.03 308.4c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero"></path>
		</svg>
		</button>
		<a title="%1$s" aria-label="%1$s" rel="nofollow" href="#">%5$s</a>
	</div>',
		esc_attr__( 'Scroll back to top', 'generatepress' ),
		absint( apply_filters( 'generate_back_to_top_scroll_speed', 400 ) ),
		absint( apply_filters( 'generate_back_to_top_start_scroll', 300 ) ),
		esc_attr( apply_filters( 'generate_back_to_top_icon', 'fa-angle-up' ) ),
		generate_get_svg_icon( 'arrow-up' )
	);
}

Then add this CSS:

/* Set icons in row */
.generate-back-to-top {
  display: flex;
  width: auto;
}

/* Style icons */
.generate-back-to-top .gp-icon {
  padding: 0;
  display: block;
  line-height: 40px;
  width: 40px;
  margin-left: 10px;
  background-color: #000;
  color: #fff;
  font-size: 20px;
  border: 0;
  border-radius: 2px;
}

/* button hover color */
.generate-back-to-top .gp-icon:hover {
  background-color: #ccc;
}

/* Rotate back button left */
.go-back-button.gp-icon svg {
  transform: rotate(-90deg);
}

It should appear on every page/blog.

that snippet will apply it across the entire site

OK that works. Can you please show me how to style it?

I have another issue:

I made my header sticky : header#masthead{position:sticky;top:0;z-index:2;}

This doesn't work with the chronologie-page. Here the contant scrolls on top of the header.

Can you have a look, please

http://s857386238.online.de/chronologie/

To fix the sticky navigation increase the z-index to a larger number eg. z-index: 100;

How do you want the Back to Top and Go Back buttons styled?
1. Do you want the Go Back text or just an icon ?
2. Are the elements inline or stacked on top of each other?

To fix the sticky navigation increase the z-index to a larger number eg. z-index:100;

That works fine! Thank you David!

1. I think an icon would do and it should be inline.

Ok i updated the snippet above and include the additional CSS:

https://generatepress.com/forums/topic/back-to-previous-page-button-in-footer/#post-1688360

Hello David,
now everything is working fine. I'm going to style the buttons a little bit more...

Thank you so much!!!

Glad to be of help :)