To top

When clicking the button the page jumps to it's top.

preview

<button class="btn btn-to-top ">
    <svg class="icon btn-icon icon-3" xmlns="http://www.w3.org/2000/svg" role="img"
        focusable="false">
        <title>To top</title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-up">
        </use>
    </svg>
</button>

Dark background#

preview

<button class="btn btn-to-top ">
    <svg class="icon btn-icon icon-3" xmlns="http://www.w3.org/2000/svg" role="img"
        focusable="false">
        <title>To top</title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-up">
        </use>
    </svg>
</button>

Fade#

Use the .fade class to provide the fade animation for a smooth display and hiding of the button when scrolling. To prevent the button from beeing clickable, additionally use the class .invisible. You can use our Javascript to show and hide the button while scrolling the page.

Position#

To place the button in the bottom right corner use .btn-to-top-position class.

<button class="btn btn-to-top btn-to-top-position">
    [...]
</button>

The to top button could overlay content at the very end of the page. To avoid this behavior you could add some space. E.g. add the .pb-8 utility class to the footer component. This extend the footer padding bottom to 4rem. Now the button has enough space and does not hide any content anymore.

<footer class="footer pb-8" [...]>
    [...]
</footer>

preview

<footer class="footer" role="contentinfo">
    <div class="container-responsive">
        <ul class="list-unstyled mb-0">
            <li class="mb-4">
                <strong class="footer-headline">Headline</strong>
                <ul class="footer-list ">
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                </ul>
            </li>
            <li>
                <strong class="footer-headline">Headline</strong>
                <ul class="footer-list ">
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                    <li class="footer-list-item ">
                        <a class="footer-list-item-link" href="#">Main-Nav title</a>
                    </li>
                </ul>
            </li>
        </ul>
        <hr />
        <ul class="footer-list ">
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Main-Nav title</a>
            </li>
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Meta-Nav title</a>
            </li>
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Meta-Nav title</a>
            </li>
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Meta-Nav title</a>
            </li>
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Meta-Nav title</a>
            </li>
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Meta-Nav title</a>
            </li>
            <li class="footer-list-item ">
                <a class="footer-list-item-link" href="#">Meta-Nav title</a>
            </li>
        </ul>
    </div>
</footer>
<button class="btn btn-to-top btn-to-top-position">
    <svg class="icon btn-icon icon-3" xmlns="http://www.w3.org/2000/svg" role="img"
        focusable="false">
        <title>To top</title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-up">
        </use>
    </svg>
</button>

JavaScript#

The to top does not work without javascript. You can import our javascript bundle cake.js to automatically use this feature. You only must ensure that the property data-controller="totop" is set on the button element.

Initialization#

To initialize the javascript with default configuration you could simply run the following code:

document.addEventListener ('DOMContentLoaded', () => {
    window.cake.toTop ();
});

Customization#

To customize the default behavior you can only embedd the toTop.js file into your mockups. Then you can initialize the functionality by calling:

document.addEventListener ('DOMContentLoaded', () => {
    window.cake.toTop (options = {
        buttonElements = [],
        buttonQuerySelector = '[data-controller="totop"]',
        offset = 20,
        enableSmoothScrolling = true,
    });
});
  • buttonElements [Array] – provide the specific to top button HTMLElements. (optional)
  • buttonQuerySelector [String] – provide a query-selector to select all to top button elements. (optional, default: [data-controller="totop"])
  • offset [Number] – number of pixels to use as offset like explained below. (optional, default: 20).
  • enableSmoothScrolling [Boolean] – set to true to enable the smooth-scrolling for modern browsers or disable it with false. More about the scroll behavior can be read below. (optional, default: true).

If you do provide the options.buttonElements the options.buttonQuerySelector option gets ignored. If you do not provide any options.buttonElements always the options.buttonQuerySelector is used!

Offset#

The button is shown after an offset of (default) 20px. You can set a custom offset by adding the optional parameter offset during the initialisation.

totop (60);

The above example will set the offset to 60px.

Scroll behavior#

By default the script will set the scroll-behavior: smooth to the document-element of the page for a smooth scroll animation. This functionality is enabled by default but you have the option to disable this behavior. Set false as second value to disable smooth scroll animation.

totop (60, false);

With this initialization the smooth scrolling will be disabled and therefore the site jumps directly to top of the page, when clicking the button.

preview

<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />
<button class="btn btn-to-top fade invisible" data-controller="totop">
    <svg class="icon btn-icon icon-3" xmlns="http://www.w3.org/2000/svg" role="img"
        focusable="false">
        <title>To top</title>
        <use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-up">
        </use>
    </svg>
</button>
import "./cakeDOM";

if (typeof window.cake !== "object") {
    window.cake = {};
}

const defaultOptions = {
    buttonElements: [],
    buttonQuerySelector: '[data-controller="totop"]',
    offset: 20,
    enableSmoothScrolling: true,
};

window.cake.toTop = (options = defaultOptions) => {
    options = {
        ...defaultOptions,
        ...options
    };
    const buttons = window.cake.utils.getElements(options.buttonElements, options
        .buttonQuerySelector);

    window.addEventListener("scroll", () => {
        if (document.body.scrollTop > options.offset || document.documentElement
            .scrollTop > options.offset) {
            for (let i = 0; i < buttons.length; i++) {
                if (buttons[i].classList.contains("show")) continue;
                toggleDisplay(buttons[i], false);
                buttons[i].classList.add("show");
            }
        } else {
            for (let i = 0; i < buttons.length; i++) {
                if (!buttons[i].classList.contains("show")) continue;
                buttons[i].classList.remove("show");
                toggleDisplay(buttons[i], true);
            }
        }
    });

    let timeout;

    function toggleDisplay(button, show) {
        clearTimeout(timeout);
        if (!show) {
            button.classList.remove("invisible");
            return;
        }
        const delay = window.getComputedStyle(button).getPropertyValue('transition-duration') ||
            0;
        timeout = setTimeout(
            () => {
                button.classList.add("invisible");
            },
            parseFloat(delay) * 1000
        );
    }

    for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", (ev) => {
            ev.preventDefault();
            document.body.scrollTop = 0; // For Safari
            document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
        });
    }

    //Add smooth scroll behavior to html-element
    if (options.enableSmoothScrolling) {
        document.documentElement.style.scrollBehavior = "smooth";
    }
};

export default window.cake.toTop;

Change log#

6.2.0 - 2021-08-19#

Added#

  • Doc: "To top" | added javaScript file content as "JS" tab

5.0.0 - 2021-01-28#

Changed#

  • JS, Doc: "To top" | updated javascript to provide options object for better integration of CAKE

4.4.0 - 2020-10-22#

Changed#

  • SCSS: "To top" | adjusted focus style to use default CAKE focus stylings
  • Doc: "To top" | Fix negative example of to top button

3.8.0 - 2019-11-07#

Changed#

  • SCSS: "To top" | Use mixins for border radius

Fixed#

  • SCSS: "To top" | Added !default to $to-top-right in _variables.scss file.

3.5.0 - 2019-07-18#

Changed#

  • CSS: "To top" | Updated position of to-top button with additional .btn-to-top-position to stay on the right position of the grid.

3.1.0 - 2019-05-24#

Added#

  • Doc: "To top" | Added spacing information between "To top" button and "Footer" components.