A back button should always be implemented using the JavaScript history.back();, as this also scrolls to the original position on the previous page.
<!-- Proceed -->
<div class="navigationLink">
<a href="#" class="link"><span class="link-label">Weiter</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</div>
<!-- Go Back -->
<div class="navigationLink">
<a href="javascript:history.back();" class="link"><svg class="icon is-arrow-return">
<use href="../../icons/icons.svg#icon--arrow-return" xlink:href="../../icons/icons.svg#icon--arrow-return"></use>
</svg>
<span class="link-label">Zurück</span></a>
</div>
<!-- Back to top -->
<div class="navigationLink">
<a href="#" class="link"><svg class="icon is-arrow-top">
<use href="../../icons/icons.svg#icon--arrow-top" xlink:href="../../icons/icons.svg#icon--arrow-top"></use>
</svg>
<span class="link-label">Nach oben</span></a>
</div>
<!-- Icon only -->
<div class="navigationLink">
<a href="#" class="link is-icon-only" title="Nach oben"><svg class="icon is-arrow-top">
<use href="../../icons/icons.svg#icon--arrow-top" xlink:href="../../icons/icons.svg#icon--arrow-top"></use>
</svg>
<span class="link-label">Nach oben</span></a>
</div>
<div class="navigationLink{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{.}}{{/modifier}}">
{{#link}}
{{render '@link' (contextData '@navigationlink' this) merge=true}}
{{/link}}
</div>
/* Proceed */
{
"link": {
"url": "#",
"label": "Weiter",
"icon": {
"id": "arrow-right"
}
}
}
/* Go Back */
{
"link": {
"url": "javascript:history.back();",
"label": "Zurück",
"icon": {
"is-before": true,
"id": "arrow-return"
}
}
}
/* Back to top */
{
"link": {
"url": "#",
"label": "Nach oben",
"icon": {
"is-before": true,
"id": "arrow-top"
}
}
}
/* Icon only */
{
"link": {
"url": "#",
"is-icon-only": true,
"label": "Nach oben",
"icon": {
"is-before": true,
"id": "arrow-top"
}
}
}
@import "_navigationLink.styles";
%navigationLink {
.link {
@extend %link--stand-alone;
font-weight: $_font-weight;
}
}
%navigationLink {
@include stack-spacing();
display: block;
width: 100%;
.link {
@extend %link--stand-alone;
@include stack-spacing(0);
}
}
.navigationLink {
@extend %navigationLink;
}