Wiki

für WordPress-Entwickler

Anleitungen, Snippets und mehr…

Back-to-Top-Button

Auf Seiten oder in Beiträgen mit sehr langem Content empfiehlt sich ein Back-to-Top-Button, damit der User einfach wieder zum Menü/Seitenanfang scrollen kann. Ich binde dafür auf Seiten und Posts eine Metabox ein, mit der ich für diese Seite/Post explizit den Back-to-Top-Button aktivieren kann.

So wird der Back-to-top-Button bei mir aussehen:

Normalzustand des Back-to-Top-Buttons
Hover-Zustand des Back-to-Top-Buttons
Die Metabox im WP-Backend

Hier zeige ich eine Möglichkeit, wie man diesen Button im Theme verankern kann.

In der functions.php erstelle ich die folgenden Funktionen:

// 1. Meta-Box registrieren
function add_back_to_top_meta_box() {
	// Alle öffentlichen Post-Typen abrufen (z. B. 'post', 'page', etc.).
	$post_types = get_post_types(['public' => true], 'names');

	// Eine Meta-Box hinzufügen.
	add_meta_box(
		'back_to_top_meta', // ID der Meta-Box
		__('Back to Top Button', 'hbdev'), // Titel der Meta-Box
		'back_to_top_meta_box_callback', // Callback-Funktion, die den Inhalt der Box rendert
		$post_types, // Ziel-Post-Typen
		'side', // Platzierung in der Seitenleiste des Editors
		'default' // Priorität der Anzeige
	);
}
// Aktion hinzufügen, um die Meta-Boxen zu registrieren
add_action('add_meta_boxes', 'add_back_to_top_meta_box');

// 2. Meta-Box-Inhalt rendern
function back_to_top_meta_box_callback($post) {
	// Meta-Wert abrufen (1 = aktiviert, 0 = deaktiviert).
	$value = get_post_meta($post->ID, '_back_to_top_enabled', true);
	?>
    <label for="back_to_top_enabled">
        <!-- Checkbox zur Aktivierung des Buttons -->
        <input type="checkbox" name="back_to_top_enabled" id="back_to_top_enabled" value="1" <?php checked($value, '1'); ?>>
		<?php _e('Enable Back to Top Button', 'hbdev'); ?>
    </label>
	<?php
}

// 3. Meta-Daten speichern
function save_back_to_top_meta_box($post_id) {
	// Prüfen, ob die Checkbox im Formular gesetzt wurde.
	if (isset($_POST['back_to_top_enabled'])) {
		// Meta-Wert speichern (1 = aktiviert).
		update_post_meta($post_id, '_back_to_top_enabled', '1');
	} else {
		// Meta-Wert löschen, wenn die Checkbox nicht gesetzt wurde.
		delete_post_meta($post_id, '_back_to_top_enabled');
	}
}
// Aktion hinzufügen, um Meta-Daten beim Speichern eines Beitrags zu speichern
add_action('save_post', 'save_back_to_top_meta_box');

// 4. Back-to-Top-Button einfügen
function add_back_to_top_button() {
	// Prüfen, ob es sich um eine Einzelseite/-beitrag handelt und die Option aktiviert ist.
	if ( is_singular() && get_post_meta( get_the_ID(), '_back_to_top_enabled', true ) ) {
		// Button HTML ausgeben.
		echo '<div id="back-to-top" class="back-to-top" style="display: none;">
                <a href="#top">↑ ' . __( 'Zurück nach oben', 'hbdev' ) . '</a>
              </div>';
	}
}
// Aktion hinzufügen, um den Button bei wp_body_open einzufügen
add_action('wp_body_open', 'add_back_to_top_button');

Und hier das verwendete JS:

// Handling Back-to-top-Button
document.addEventListener('DOMContentLoaded', function () {
    var backToTop = document.getElementById('back-to-top');

    window.addEventListener('scroll', function () {
        if (window.scrollY > 400) { // Button erscheint nach 400px Scrollhöhe
            backToTop.style.display = 'block';
        } else {
            backToTop.style.display = 'none';
        }
    });

    backToTop.addEventListener('click', function (e) {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
});

document.addEventListener('DOMContentLoaded', function () {
    var backToTop = document.getElementById('back-to-top');
    if (backToTop && backToTop.parentNode.classList.contains('mm-page')) {
        // Button wieder direkt ins <body> verschieben
        document.body.insertBefore(backToTop, document.body.firstChild);
    }
});

Etwas CSS verwenden wir auch:

#back-to-top {
  position: fixed; /* Fixiert den Button an einer festen Position relativ zum Viewport */
  top: 92vh;       /* 92% vom oberen Bildschirmrand */
  right: 20px;     /* 20px Abstand vom rechten Rand */
  z-index: 9999;   /* Hohe Priorität, damit er über anderen Elementen liegt */
  background-color: #af08bd;
  color: #fff;
  padding: 10px 15px;
  border-radius: 50px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: none; /* Der Button wird standardmäßig durch JS ein-/ausgeblendet */

  &:hover {
    color: #111 !important;
    opacity: 0.7;

    a, a:focus, a:active {
      color: #111;
    }
  }

  a {
    color: #fff;
    text-decoration: none;
  }
}

Das Resultat ist ein Button, der nach einem Scrollen von 400px erscheint. Der Button wird an seiner festgelegten Position bleiben, bis man wieder in den oberen Bereich der Seite scrollt (Position < 400px). Dieser Button wird im Backend separat für jede Seite/Beitrag aktiviert, da ich mir für kurzen Seiteninhalt diesen Button gerne spare.