BETA Hej! Denna webbplats är under utveckling. Bidra gärna med feedback!
Stilguide
Bidra

Back to top: With Container 

<div>
    <p>
        Scrolla ner åt för att se hur knappen fungerar. Texten används för bara att testa komponenten.
    </p>

    <p>
        Quisque ut lobortis tellus, quis pulvinar leo. Pellentesque ornare velit sit amet imperdiet lobortis. Etiam hendrerit magna a dolor convallis accumsan. Aliquam condimentum nunc quis turpis dignissim bibendum. Morbi vel egestas dui. Nunc leo enim, sagittis
        ac venenatis vel, euismod et leo. Ut dignissim quis dolor a fringilla. Nulla finibus sapien nibh, fermentum ultricies dui hendrerit eget.
    </p>

    <p>Morbi at justo feugiat, luctus massa id, efficitur tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque pellentesque, elit at volutpat sagittis, mi magna convallis tellus, sed porta arcu arcu
        in magna. Suspendisse tristique tortor tellus, at consectetur mi hendrerit nec. Vivamus id urna nulla. Vestibulum dapibus porttitor pellentesque. Curabitur metus lectus, fringilla vel nibh finibus, lacinia finibus ante.</p>

    <p>Cras elit est, rhoncus mattis mattis quis, pulvinar in lorem. Etiam tristique diam eget risus euismod fringilla. Aliquam imperdiet venenatis purus, ut hendrerit nisl egestas in. Nunc dignissim consectetur orci, at dignissim diam feugiat nec. Nam vitae
        malesuada enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem mi, cursus vel consectetur et, mollis et nisl. Mauris eget condimentum velit. Morbi tempus erat lorem, ac malesuada dolor euismod ac. In at lectus commodo,
        blandit tellus at, luctus leo. Nam interdum augue elit, quis sodales nunc suscipit eget. Nunc bibendum interdum consectetur. Curabitur rhoncus nibh sed metus suscipit, et blandit ligula pulvinar. Vivamus venenatis, enim sit amet rutrum gravida,
        est magna faucibus urna, at ultricies velit nunc eget nunc. Nulla facilisi. Sed mattis nulla at mauris tincidunt, eget maximus arcu rhoncus.</p>

    <p>Fusce eros dolor, lobortis egestas odio volutpat, euismod scelerisque purus. Curabitur nibh lacus, vestibulum eu purus in, tempor vestibulum ante. Donec molestie laoreet elit, eu egestas odio ullamcorper a. Vestibulum vitae finibus diam, eu dictum
        diam. Nunc molestie, tellus at pellentesque eleifend, neque eros eleifend velit, eget commodo erat orci sed eros. Sed euismod nibh eu ante maximus, sit amet viverra ipsum laoreet. Vestibulum et fringilla mi, eu interdum est. Donec odio ipsum,
        porttitor ac commodo et, dapibus nec nulla. Ut magna purus, commodo sit amet tortor et, sollicitudin porttitor tellus. Quisque at elit rhoncus, consectetur metus non, mollis mi. Phasellus in ligula id lectus viverra euismod at sed justo. Vivamus
        non ullamcorper orci. Nunc aliquet, tellus eu ultricies varius, augue nisi elementum ligula, in vulputate ligula ex at metus. Pellentesque blandit fermentum posuere.
    </p>

    <p>Nullam at convallis nisi, at luctus augue. Pellentesque quis dui pulvinar, rhoncus mi luctus, ultricies nisi. Donec sollicitudin nisi at felis bibendum faucibus. Integer tincidunt, nisl eu cursus consequat, dui mi pharetra dui, nec fermentum neque
        mauris tincidunt erat. Nulla eros justo, consectetur in molestie sit amet, pellentesque vel libero. Mauris luctus orci ut fringilla cursus. Pellentesque venenatis velit non hendrerit consequat. Integer in tincidunt urna, vitae tincidunt justo.
        Curabitur scelerisque posuere ex ut fermentum. Ut iaculis metus in nibh sodales, non laoreet sem mattis. Aenean dui metus, malesuada nec aliquet sed, porta ut turpis.</p>

    <p>
        Quisque ut lobortis tellus, quis pulvinar leo. Pellentesque ornare velit sit amet imperdiet lobortis. Etiam hendrerit magna a dolor convallis accumsan. Aliquam condimentum nunc quis turpis dignissim bibendum. Morbi vel egestas dui. Nunc leo enim, sagittis
        ac venenatis vel, euismod et leo. Ut dignissim quis dolor a fringilla. Nulla finibus sapien nibh, fermentum ultricies dui hendrerit eget.
    </p>

    <p>Morbi at justo feugiat, luctus massa id, efficitur tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque pellentesque, elit at volutpat sagittis, mi magna convallis tellus, sed porta arcu arcu
        in magna. Suspendisse tristique tortor tellus, at consectetur mi hendrerit nec. Vivamus id urna nulla. Vestibulum dapibus porttitor pellentesque. Curabitur metus lectus, fringilla vel nibh finibus, lacinia finibus ante.</p>

    <p>Cras elit est, rhoncus mattis mattis quis, pulvinar in lorem. Etiam tristique diam eget risus euismod fringilla. Aliquam imperdiet venenatis purus, ut hendrerit nisl egestas in. Nunc dignissim consectetur orci, at dignissim diam feugiat nec. Nam vitae
        malesuada enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem mi, cursus vel consectetur et, mollis et nisl. Mauris eget condimentum velit. Morbi tempus erat lorem, ac malesuada dolor euismod ac. In at lectus commodo,
        blandit tellus at, luctus leo. Nam interdum augue elit, quis sodales nunc suscipit eget. Nunc bibendum interdum consectetur. Curabitur rhoncus nibh sed metus suscipit, et blandit ligula pulvinar. Vivamus venenatis, enim sit amet rutrum gravida,
        est magna faucibus urna, at ultricies velit nunc eget nunc. Nulla facilisi. Sed mattis nulla at mauris tincidunt, eget maximus arcu rhoncus.</p>

    <p>Fusce eros dolor, lobortis egestas odio volutpat, euismod scelerisque purus. Curabitur nibh lacus, vestibulum eu purus in, tempor vestibulum ante. Donec molestie laoreet elit, eu egestas odio ullamcorper a. Vestibulum vitae finibus diam, eu dictum
        diam. Nunc molestie, tellus at pellentesque eleifend, neque eros eleifend velit, eget commodo erat orci sed eros. Sed euismod nibh eu ante maximus, sit amet viverra ipsum laoreet. Vestibulum et fringilla mi, eu interdum est. Donec odio ipsum,
        porttitor ac commodo et, dapibus nec nulla. Ut magna purus, commodo sit amet tortor et, sollicitudin porttitor tellus. Quisque at elit rhoncus, consectetur metus non, mollis mi. Phasellus in ligula id lectus viverra euismod at sed justo. Vivamus
        non ullamcorper orci. Nunc aliquet, tellus eu ultricies varius, augue nisi elementum ligula, in vulputate ligula ex at metus. Pellentesque blandit fermentum posuere.
    </p>

    <p>Nullam at convallis nisi, at luctus augue. Pellentesque quis dui pulvinar, rhoncus mi luctus, ultricies nisi. Donec sollicitudin nisi at felis bibendum faucibus. Integer tincidunt, nisl eu cursus consequat, dui mi pharetra dui, nec fermentum neque
        mauris tincidunt erat. Nulla eros justo, consectetur in molestie sit amet, pellentesque vel libero. Mauris luctus orci ut fringilla cursus. Pellentesque venenatis velit non hendrerit consequat. Integer in tincidunt urna, vitae tincidunt justo.
        Curabitur scelerisque posuere ex ut fermentum. Ut iaculis metus in nibh sodales, non laoreet sem mattis. Aenean dui metus, malesuada nec aliquet sed, porta ut turpis.</p>

</div>

<div class="rh-back-to-top__container">
    <a href="#" title="Scrolla till toppen" class="rh-link--navigation">
        <div id="back-to-top" class="rh-button-circle rh-button-circle--default rh-button-circle--large rh-back-to-top">
            <span class="icon-chevron-up rh-button-circle__icon"></span>
        </div>
    </a>
</div>
 
{{!-- Using for scrolling testing --}}
<div>
    <p>
        Scrolla ner åt för att se hur knappen fungerar. Texten används för bara att testa komponenten.
    </p>

    <p>
        Quisque ut lobortis tellus, quis pulvinar leo. Pellentesque ornare velit sit amet imperdiet lobortis. Etiam
        hendrerit magna a dolor convallis accumsan. Aliquam condimentum nunc quis turpis dignissim bibendum. Morbi vel
        egestas dui. Nunc leo enim, sagittis ac venenatis vel, euismod et leo. Ut dignissim quis dolor a fringilla.
        Nulla
        finibus sapien nibh, fermentum ultricies dui hendrerit eget.
    </p>

    <p>Morbi at justo feugiat, luctus massa id, efficitur tortor. Vestibulum ante ipsum primis in faucibus orci luctus
        et
        ultrices posuere cubilia Curae; Pellentesque pellentesque, elit at volutpat sagittis, mi magna convallis tellus,
        sed
        porta arcu arcu in magna. Suspendisse tristique tortor tellus, at consectetur mi hendrerit nec. Vivamus id urna
        nulla. Vestibulum dapibus porttitor pellentesque. Curabitur metus lectus, fringilla vel nibh finibus, lacinia
        finibus ante.</p>

    <p>Cras elit est, rhoncus mattis mattis quis, pulvinar in lorem. Etiam tristique diam eget risus euismod fringilla.
        Aliquam imperdiet venenatis purus, ut hendrerit nisl egestas in. Nunc dignissim consectetur orci, at dignissim
        diam
        feugiat nec. Nam vitae malesuada enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem
        mi,
        cursus vel consectetur et, mollis et nisl. Mauris eget condimentum velit. Morbi tempus erat lorem, ac malesuada
        dolor euismod ac. In at lectus commodo, blandit tellus at, luctus leo. Nam interdum augue elit, quis sodales
        nunc
        suscipit eget. Nunc bibendum interdum consectetur. Curabitur rhoncus nibh sed metus suscipit, et blandit ligula
        pulvinar. Vivamus venenatis, enim sit amet rutrum gravida, est magna faucibus urna, at ultricies velit nunc eget
        nunc. Nulla facilisi. Sed mattis nulla at mauris tincidunt, eget maximus arcu rhoncus.</p>

    <p>Fusce eros dolor, lobortis egestas odio volutpat, euismod scelerisque purus. Curabitur nibh lacus, vestibulum eu
        purus in, tempor vestibulum ante. Donec molestie laoreet elit, eu egestas odio ullamcorper a. Vestibulum vitae
        finibus diam, eu dictum diam. Nunc molestie, tellus at pellentesque eleifend, neque eros eleifend velit, eget
        commodo erat orci sed eros. Sed euismod nibh eu ante maximus, sit amet viverra ipsum laoreet. Vestibulum et
        fringilla mi, eu interdum est. Donec odio ipsum, porttitor ac commodo et, dapibus nec nulla. Ut magna purus,
        commodo
        sit amet tortor et, sollicitudin porttitor tellus. Quisque at elit rhoncus, consectetur metus non, mollis mi.
        Phasellus in ligula id lectus viverra euismod at sed justo. Vivamus non ullamcorper orci. Nunc aliquet, tellus
        eu
        ultricies varius, augue nisi elementum ligula, in vulputate ligula ex at metus. Pellentesque blandit fermentum
        posuere.</p>

    <p>Nullam at convallis nisi, at luctus augue. Pellentesque quis dui pulvinar, rhoncus mi luctus, ultricies nisi.
        Donec
        sollicitudin nisi at felis bibendum faucibus. Integer tincidunt, nisl eu cursus consequat, dui mi pharetra dui,
        nec
        fermentum neque mauris tincidunt erat. Nulla eros justo, consectetur in molestie sit amet, pellentesque vel
        libero.
        Mauris luctus orci ut fringilla cursus. Pellentesque venenatis velit non hendrerit consequat. Integer in
        tincidunt
        urna, vitae tincidunt justo. Curabitur scelerisque posuere ex ut fermentum. Ut iaculis metus in nibh sodales,
        non
        laoreet sem mattis. Aenean dui metus, malesuada nec aliquet sed, porta ut turpis.</p>

    <p>
        Quisque ut lobortis tellus, quis pulvinar leo. Pellentesque ornare velit sit amet imperdiet lobortis. Etiam
        hendrerit magna a dolor convallis accumsan. Aliquam condimentum nunc quis turpis dignissim bibendum. Morbi vel
        egestas dui. Nunc leo enim, sagittis ac venenatis vel, euismod et leo. Ut dignissim quis dolor a fringilla.
        Nulla
        finibus sapien nibh, fermentum ultricies dui hendrerit eget.
    </p>

    <p>Morbi at justo feugiat, luctus massa id, efficitur tortor. Vestibulum ante ipsum primis in faucibus orci luctus
        et
        ultrices posuere cubilia Curae; Pellentesque pellentesque, elit at volutpat sagittis, mi magna convallis tellus,
        sed
        porta arcu arcu in magna. Suspendisse tristique tortor tellus, at consectetur mi hendrerit nec. Vivamus id urna
        nulla. Vestibulum dapibus porttitor pellentesque. Curabitur metus lectus, fringilla vel nibh finibus, lacinia
        finibus ante.</p>

    <p>Cras elit est, rhoncus mattis mattis quis, pulvinar in lorem. Etiam tristique diam eget risus euismod fringilla.
        Aliquam imperdiet venenatis purus, ut hendrerit nisl egestas in. Nunc dignissim consectetur orci, at dignissim
        diam
        feugiat nec. Nam vitae malesuada enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem
        mi,
        cursus vel consectetur et, mollis et nisl. Mauris eget condimentum velit. Morbi tempus erat lorem, ac malesuada
        dolor euismod ac. In at lectus commodo, blandit tellus at, luctus leo. Nam interdum augue elit, quis sodales
        nunc
        suscipit eget. Nunc bibendum interdum consectetur. Curabitur rhoncus nibh sed metus suscipit, et blandit ligula
        pulvinar. Vivamus venenatis, enim sit amet rutrum gravida, est magna faucibus urna, at ultricies velit nunc eget
        nunc. Nulla facilisi. Sed mattis nulla at mauris tincidunt, eget maximus arcu rhoncus.</p>

    <p>Fusce eros dolor, lobortis egestas odio volutpat, euismod scelerisque purus. Curabitur nibh lacus, vestibulum eu
        purus in, tempor vestibulum ante. Donec molestie laoreet elit, eu egestas odio ullamcorper a. Vestibulum vitae
        finibus diam, eu dictum diam. Nunc molestie, tellus at pellentesque eleifend, neque eros eleifend velit, eget
        commodo erat orci sed eros. Sed euismod nibh eu ante maximus, sit amet viverra ipsum laoreet. Vestibulum et
        fringilla mi, eu interdum est. Donec odio ipsum, porttitor ac commodo et, dapibus nec nulla. Ut magna purus,
        commodo
        sit amet tortor et, sollicitudin porttitor tellus. Quisque at elit rhoncus, consectetur metus non, mollis mi.
        Phasellus in ligula id lectus viverra euismod at sed justo. Vivamus non ullamcorper orci. Nunc aliquet, tellus
        eu
        ultricies varius, augue nisi elementum ligula, in vulputate ligula ex at metus. Pellentesque blandit fermentum
        posuere.</p>

    <p>Nullam at convallis nisi, at luctus augue. Pellentesque quis dui pulvinar, rhoncus mi luctus, ultricies nisi.
        Donec
        sollicitudin nisi at felis bibendum faucibus. Integer tincidunt, nisl eu cursus consequat, dui mi pharetra dui,
        nec
        fermentum neque mauris tincidunt erat. Nulla eros justo, consectetur in molestie sit amet, pellentesque vel
        libero.
        Mauris luctus orci ut fringilla cursus. Pellentesque venenatis velit non hendrerit consequat. Integer in
        tincidunt
        urna, vitae tincidunt justo. Curabitur scelerisque posuere ex ut fermentum. Ut iaculis metus in nibh sodales,
        non
        laoreet sem mattis. Aenean dui metus, malesuada nec aliquet sed, porta ut turpis.</p>

</div>
{{!-- End of scrolling testing --}}

{{#if isStandard}}
<div id="back-to-top" class="rh-button-circle rh-button-circle--default rh-button-circle--large rh-back-to-top">
    <span class="icon-chevron-up rh-button-circle__icon"></span>
</div>
{{/if}}

{{#if hasContainer}}
<div class="rh-back-to-top__container">
    <a href="#" title="Scrolla till toppen" class="rh-link--navigation">
        <div id="back-to-top" class="rh-button-circle rh-button-circle--default rh-button-circle--large rh-back-to-top">
            <span class="icon-chevron-up rh-button-circle__icon"></span>
        </div>
    </a>
</div>
{{/if}}
 
{
  "name": "default",
  "isStandard": false,
  "hasContainer": true
}
  • Content: 
    .rh-back-to-top {

    /* Visuellt */
    @if $back-to-top--background-color {
        background-color: $back-to-top--background-color;
    }

    /* Blandat/övrigt */
    @if $back-to-top--cursor {
        cursor: $back-to-top--cursor;
    }

    // Effect
    &:hover {
        @if $back-to-top--background-color-hover {
            background-color: $back-to-top--background-color-hover;
        }

        @if $back-to-top--text-color-hover {
            color: $back-to-top--text-color-hover;
        }
    }

    &:active {
        @if $back-to-top--background-color-active {
            background-color: $back-to-top--background-color-active;
        }

        @if $back-to-top--text-color-active {
            color: $back-to-top--text-color-active;
        }
    }

    @if $back-to-top--isResponsive {
        @include medium {
            /* Box-modell/beteende */
            width: $back-to-top--button-size-medium;
            min-width: $back-to-top--button-size-medium; //IE11
            max-width: $back-to-top--button-size-medium; //IE11

            height: $back-to-top--button-size-medium;
            min-height: $back-to-top--button-size-medium;
            max-height: $back-to-top--button-size-medium;

            .rh-circle-button__icon {
                /* Typografi */
                font-size: $back-to-top--icon-size-medium;
            }
        }
    }

    &__container {
        /* Positionering */
        position: fixed;
        bottom: 0;
        right: 0;
        z-index: $back-to-top--z-index;

        /* Box-modell/beteende */
        padding: $back-to-top__container--padding;

        transform: translate3d(0,0,0); //iOS
        -webkit-transform: translate3d(0,0,0); //iOS
        -moz-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);

        & a:hover,
        & a:active {
            text-decoration: none;
        }
    }
}
  • URL: /components/raw/back-to-top/_back-to-top.scss
  • Filesystem Path: components/Molecules/back-to-top/_back-to-top.scss
  • Size: 1.9 KB
  • Content: 
    // Needed function:
// throttle() - /public/library.js
$(document).ready(function () {
    var $btnBackToTop = $("#back-to-top"),
        btnBackToTopLimitOnHead = 500,
        btnBackToTopCurrentPos = $(window).scrollTop(); // Initial state

    btnBackToTopCurrentPos < btnBackToTopLimitOnHead ? $btnBackToTop.hide() : $btnBackToTop.show();

    $(window).scroll(throttle(function () {
        btnBackToTopCurrentPos = $(this).scrollTop(); // Update current position

        if (btnBackToTopCurrentPos > btnBackToTopLimitOnHead) {
            !$btnBackToTop.is(':visible') && $btnBackToTop.fadeIn("slow");
        } else {
            $btnBackToTop.is(':visible') && $btnBackToTop.fadeOut("slow");
        }
    }, 200));

    $btnBackToTop.click(function (e) {
        e.stopPropagation();
        $('body,html').animate({ scrollTop: 0 }, 800);
    });
});
  • URL: /components/raw/back-to-top/back-to-top.js
  • Filesystem Path: components/Molecules/back-to-top/back-to-top.js
  • Size: 861 Bytes
  • Content: 
    /* Molecules - Back to top */
$back-to-top--isResponsive: true;
$back-to-top--background-color: $base3;
$back-to-top--z-index: 10;

// Effects
$back-to-top--background-color-hover: $base3-dark; //false
$back-to-top--text-color-hover: $white; //false

$back-to-top--background-color-active: $base3-dark; //false
$back-to-top--text-color-active: $white; //false

$back-to-top--cursor: pointer;

$back-to-top--button-size-medium: 3.125em; //50px
$back-to-top--icon-size-medium: 2em;

$back-to-top__container--padding: .8em;
  • URL: /components/raw/back-to-top/back-to-top.settings.scss
  • Filesystem Path: components/Molecules/back-to-top/back-to-top.settings.scss
  • Size: 520 Bytes
  • Content: 
    {
    "name": "regionhalland/back-to-top",
    "description": "Back to top",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/back-to-top/composer.json
  • Filesystem Path: components/Molecules/back-to-top/composer.json
  • Size: 291 Bytes

Back to top

  • Komponents prefix: rh-back-to-top
  • Filplats: /components/Molecules/back-to-top

1. Alternativ

  • Inbyggd klassen rh-back-to-top__container skapas för snabb användning när man vill justera komponentens position.
  • <a> tag används när man vill att komponenten länkar till en osynlig element som är på högst upp av sidan för användare som inte har JavaScript aktiveras i deras webbläsare. Komponenten fungerar ändå.

2. Användning

2.1. Exempel 1 (standard):

<div id="back-to-top" class="rh-circle-button rh-circle-button--large rh-back-to-top">
    <span class="icon-chevron-up rh-circle-button__icon"></span>
</div>

2.2. Exempel 2 (<a> tag är en alternativ):

<a href="#" title="Scrolla till toppen" class="rh-link--navigation">
    <div id="back-to-top" class="rh-circle-button rh-circle-button--large rh-back-to-top">
        <span class="icon-chevron-up rh-circle-button__icon"></span>
    </div>
</a>

2.3. Exempel 3 (både container och <a> tag är alternativ):

<div class="rh-back-to-top__container">
    <a href="#" title="Scrolla till toppen" class="rh-link--navigation">
        <div id="back-to-top" class="rh-circle-button rh-circle-button--large rh-back-to-top">
            <span class="icon-chevron-up rh-circle-button__icon"></span>
        </div>
    </a>
</div>

3. Version

1.1.3 (2020-01-23)

  • Sökväg till label justerad efter namnbyte.

1.1.1 (2019-11-14)

  • Fixat JS fils namn

1.1.0 (2019-10-22)

Exempelkod i readme uppdaterad

1.0.0 (2019-09-26)

  • Första version.