alpha

This version is in early development and is subject to change and therefore not ready for wide use. There may be other stable versions available.

Back to top block

An anchor or JavaScript button to scroll the user to top of the current page, or to a target element.

github location npm version

Usage

Only use on component per page, multiple "back to top" links are not recommended.

Inline variant

The inline variant can be used without JavaScript and placed at the bottom of content or the page.

Floating variant

Te floating variant is recommended for this component, which appears floating at the bottom right of page. It will appear once the user has scrolled down to 100% of the page height. This requires JavaScript to function.

Variants

EMBL communications strategy 2018-2020

This communications strategy outlines EMBL’s vision, mission and goals. It is intended to support everyone who communicates on behalf of EMBL, within and outside of the organisation, in order to provide aligned messaging and help EMBL to achieve its goals. The strategy is supported by an operational plan for the Strategy and Communications team.

The plan reflects the priorities defined in the communications strategy and translates them into a set of deliverables and projects managed by the Strategy and Communications team. This documentation will be regularly reviewed and revised. Your feedback is welcome at any time: please contact EMBL’s Strategy and Communications team.

This document was last revised 7 March 2018

Section 1: EMBL’s vision and mission

EMBL’s vision

Enabling scientists worldwide to discover the secrets of life

EMBL’s mission

  1. Uncovering the molecular basis of life through research
  2. Providing research infrastructure and services
  3. Training and inspiring the next generation of scientists
  4. Driving research, innovation and progress through technology development
  5. Interactions with industry and technology transfer
  6. Playing a leading role in the integration of life science research

Further examples of bullets

  • A bulleted item
  • A nested bulleted item
  • A nested bulleted item
  • A bulleted item
  • A bulleted item
  • A bulleted item
  • A bulleted item

Definition lists

Beast of Bodmin
A large feline inhabiting Bodmin Moor.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.
Event Date Type Location
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. roger London, U.K.

What is EMBL?

EMBL is Europe’s flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.

EMBL performs fundamental research in molecular biology, studying the story of life. We offer services to the scientific community; train the next generation of scientists and strive to integrate the life sciences across Europe.

An example figure image
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.
An example figure image
A very wide image.

We are international, innovative and interdisciplinary. We are more than 1600 people, from over 80 countries, operating across six sites in Barcelona (Spain), Cambridge (UK), Grenoble (France), Hamburg (Germany), Heidelberg (Germany), and Rome (Italy). Our scientists work in independent groups and conduct research and offer services in all areas of molecular biology.

Our research drives the development of new technology and methods in the life sciences. We work to transfer this knowledge for the benefit of society.

Section 2: EMBL’s goals

Goal 1: Advancing society

The fundamental knowledge that we create, enable and share is immensely valuable to society. Life-science research and services help to address society’s grand challenges, from human health, agriculture, to the environment and beyond.

Communications goals:

Show the impact of our work in tackling society’s big challenges

Goal 2: Enable excellent science to advance our understanding of life

We support scientists worldwide with infrastructure, services, technologies, training and platforms for exchange to carry out the best possible research. We are driven by curiosity about life, the most exciting story in the universe. We believe that advancing humankind’s understanding of life is a noble goal in itself.

Communications goals:

  • Develop and sustain support for EMBL from important stakeholders
  • Attract the best scientists, engineers, technicians and support staff
  • Inform scientists about training opportunities and services

We are a group of user experience specialists in an international scientific organisation

Our aim is to help teams design services to meet the needs of their users

We believe in openness , transparency, working collaboratively and iteratively, continuously learning and sharing knowledge throughout the organisation

EMBl-EBI Web Development UX Team Mission

Anastasia Vlasiuk in the lab
Anastasiia Vlasiuk, PhD student in the Asari group, recording the visual responses of an isolated retina. PHOTO: Marietta Schupp/EMBL
Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"exampleMultiColumns" : "false",
"component-type" : "block",
"type" : "inline",
"scrollToId" : "top",
"example" : true,
 }
%}
{% include "../path_to/vf-back-to-top/vf-back-to-top.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-back-to-top', {
  "exampleMultiColumns" : "false",
  "component-type" : "block",
  "type" : "inline",
  "scrollToId" : "top",
  "example" : true,}
%}
                
React syntax

import { VfBackToTop } from "@visual-framework/vf-back-to-top/vf-back-to-top.react.js";
// or
import { VfBackToTop } from "@visual-framework/vf-back-to-top/vf-back-to-top.jsx";
<VfBackToTop parameter="value" />
                  

For individual parameter names and options, see the Nunjucks syntax example. Also follow the React setup guide. Note: React support is in its early pre-alpha stage and not all component are yet supported.

HTML
<!-- this HTML is for example use only -->
<div class="" style="position: relative;" id="top">
  <div class="vf-content">
    <h1 id="embl-communications-strategy-2018-2020">EMBL communications strategy 2018-2020</h1>


    <p class="vf-content__standfirst">This <a href="#">communications strategy</a> outlines EMBL’s vision, mission and goals. It is intended to support everyone who communicates on behalf of EMBL, within and outside of the organisation, in order to provide aligned messaging and help EMBL to achieve its goals. The strategy is supported by an operational plan for the Strategy and Communications team.</p>
    <p class="vf-content__standfirst">The plan reflects the priorities defined in the communications strategy and translates them into a set of deliverables and projects managed by the Strategy and Communications team. This documentation will be regularly reviewed and revised. Your feedback is welcome at any time: please contact EMBL’s Strategy and Communications team.</p>
    <small><i>This document was last revised 7 March 2018</i></small>

    <h2 id="section-1-embls-vision-and-mission">Section 1: EMBL’s vision and mission</h2>
    <h3 id="embls-vision">EMBL’s vision</h3>
    <p>Enabling scientists worldwide to discover the secrets of life</p>
    <h3 id="embls-mission">EMBL’s mission</h3>
    <ol>
      <li>Uncovering the molecular basis of life through research</li>
      <li>Providing research infrastructure and services</li>
      <li>Training and inspiring the next generation of scientists</li>
      <li>Driving research, innovation and progress through technology development</li>
      <li>Interactions with industry and technology transfer</li>
      <li>Playing a leading role in the integration of life science research</li>
    </ol>
    <h3 id="further-examples-of-bullets">Further examples of bullets</h3>
    <ul>
      <li>A bulleted item</li>
      <li>A nested bulleted item</li>
      <li>A nested bulleted item</li>
      <li>A bulleted item</li>
      <li>A bulleted item</li>
      <li>A bulleted item</li>
      <li>A bulleted item</li>
    </ul>
    <h3 id="definition-lists">Definition lists</h3>
    <dl>
      <dt>Beast of Bodmin</dt>
      <dd>A large feline inhabiting Bodmin Moor.</dd>

      <dt>Morgawr</dt>
      <dd>A sea serpent.</dd>

      <dt>Owlman</dt>
      <dd>A giant owl-like creature.</dd>
    </dl>


    <table>
      <thead>
        <tr>
          <th scope="col">Event</th>
          <th scope="col">Date</th>
          <th scope="col">Type</th>
          <th scope="col">Location</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>dave</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores.</td>
          <td>roger</td>
          <td>London, U.K.</td>
        </tr>
        <tr>
          <td>dave</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet.</td>
          <td>roger</td>
          <td>London, U.K.</td>
        </tr>
        <tr>
          <td>dave</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
          <td>roger</td>
          <td>London, U.K.</td>
        </tr>
      </tbody>
    </table>

    <h3>What is EMBL?</h3>
    <p>EMBL is Europe’s flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.</p>
    <p>EMBL performs fundamental research in molecular biology, studying the story of life. We offer services to the scientific community; train the next generation of scientists and strive to integrate the life sciences across Europe.</p>

    <figure>
      <img src="../../assets/vf-figure/assets/figure-example.png" alt="An example figure image" loading="lazy">
      <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.</figcaption>
    </figure>

    <figure>
      <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20201202_hero_emblorg_homepage-zoom-out.jpg" alt="An example figure image" loading="lazy">
      <figcaption>A very wide image.</figcaption>
    </figure>

    <p>We are international, innovative and interdisciplinary. We are more than 1600 people, from over 80 countries, operating across six sites in Barcelona (Spain), Cambridge (UK), Grenoble (France), Hamburg (Germany), Heidelberg (Germany), and Rome (Italy). Our scientists work in independent groups and conduct research and offer services in all areas of molecular biology.</p>
    <p>Our research drives the development of new technology and methods in the life sciences. We work to transfer this knowledge for the benefit of society.</p>

    <h2>Section 2: EMBL’s goals</h2>

    <h3>Goal 1: Advancing society</h3>
    <p>The fundamental knowledge that we create, enable and share is immensely valuable to society. Life-science research and services help to address society’s grand challenges, from human health, agriculture, to the environment and beyond.</p>

    <h4>Communications goals:</h4>
    <p>Show the impact of our work in tackling society’s big challenges</p>

    <h3>Goal 2: Enable excellent science to advance our understanding of life</h3>
    <p>We support scientists worldwide with infrastructure, services, technologies, training and platforms for exchange to carry out the best possible research. We are driven by curiosity about life, the most exciting story in the universe. We believe that advancing humankind’s understanding of life is a noble goal in itself.</p>

    <h4>Communications goals:</h4>
    <ul>
      <li>Develop and sustain support for EMBL from important stakeholders</li>
      <li>Attract the best scientists, engineers, technicians and support staff</li>
      <li>Inform scientists about training opportunities and services</li>
    </ul>

    <blockquote>
      <p>We are a group of user experience specialists in an international scientific organisation</p>
      <p>Our aim is to help teams design services to meet the needs of their users</p>
      <p>We believe in openness , transparency, working collaboratively and iteratively, continuously learning and sharing knowledge throughout the organisation</p>
      <p><cite>EMBl-EBI Web Development UX Team Mission</cite></p>
    </blockquote>

    <figure>
      <img src="https://news.embl.de/wp-content/uploads/2019/11/Anastasia-Vlasiuk.jpg" alt="Anastasia Vlasiuk in the lab" loading="lazy">
      <figcaption>Anastasiia Vlasiuk, PhD student in the Asari group, recording the visual responses of an isolated retina. PHOTO: Marietta Schupp/EMBL</figcaption>
    </figure>

  </div>

  <div class="vf-back-to-top vf-back-top--inline" data-vf-js-back-to-top>
    <a href="#top" data-scroll-to-id="top" class="vf-button vf-button--secondary vf-button--sm" aria-label="Back to top">
      <svg class="vf-icon vf-icon--search-btn | vf-button__icon" viewBox="0 0 140 140" width="16" height="16">
        <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
          <path d="M23.421,11.765,13.768.8A2.641,2.641,0,0,0,12,0a2.645,2.645,0,0,0-1.768.8L.579,11.765A1.413,1.413,0,1,0,2.7,13.632l7.45-8.466a.25.25,0,0,1,.437.166V22.587a1.413,1.413,0,1,0,2.826,0V5.332a.25.25,0,0,1,.438-.165L21.3,13.632a1.413,1.413,0,1,0,2.121-1.867Z" fill="#3b6fb6" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
        </g>
      </svg>
      Back to top
    </a>
  </div>

  <!-- this HTML is for example use only -->
</div>
              

EMBL communications strategy 2018-2020

This communications strategy outlines EMBL’s vision, mission and goals. It is intended to support everyone who communicates on behalf of EMBL, within and outside of the organisation, in order to provide aligned messaging and help EMBL to achieve its goals. The strategy is supported by an operational plan for the Strategy and Communications team.

The plan reflects the priorities defined in the communications strategy and translates them into a set of deliverables and projects managed by the Strategy and Communications team. This documentation will be regularly reviewed and revised. Your feedback is welcome at any time: please contact EMBL’s Strategy and Communications team.

This document was last revised 7 March 2018

Section 1: EMBL’s vision and mission

EMBL’s vision

Enabling scientists worldwide to discover the secrets of life

EMBL’s mission

  1. Uncovering the molecular basis of life through research
  2. Providing research infrastructure and services
  3. Training and inspiring the next generation of scientists
  4. Driving research, innovation and progress through technology development
  5. Interactions with industry and technology transfer
  6. Playing a leading role in the integration of life science research

Further examples of bullets

  • A bulleted item
  • A nested bulleted item
  • A nested bulleted item
  • A bulleted item
  • A bulleted item
  • A bulleted item
  • A bulleted item

Definition lists

Beast of Bodmin
A large feline inhabiting Bodmin Moor.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.
Event Date Type Location
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. roger London, U.K.

What is EMBL?

EMBL is Europe’s flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.

EMBL performs fundamental research in molecular biology, studying the story of life. We offer services to the scientific community; train the next generation of scientists and strive to integrate the life sciences across Europe.

An example figure image
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.
An example figure image
A very wide image.

We are international, innovative and interdisciplinary. We are more than 1600 people, from over 80 countries, operating across six sites in Barcelona (Spain), Cambridge (UK), Grenoble (France), Hamburg (Germany), Heidelberg (Germany), and Rome (Italy). Our scientists work in independent groups and conduct research and offer services in all areas of molecular biology.

Our research drives the development of new technology and methods in the life sciences. We work to transfer this knowledge for the benefit of society.

Section 2: EMBL’s goals

Goal 1: Advancing society

The fundamental knowledge that we create, enable and share is immensely valuable to society. Life-science research and services help to address society’s grand challenges, from human health, agriculture, to the environment and beyond.

Communications goals:

Show the impact of our work in tackling society’s big challenges

Goal 2: Enable excellent science to advance our understanding of life

We support scientists worldwide with infrastructure, services, technologies, training and platforms for exchange to carry out the best possible research. We are driven by curiosity about life, the most exciting story in the universe. We believe that advancing humankind’s understanding of life is a noble goal in itself.

Communications goals:

  • Develop and sustain support for EMBL from important stakeholders
  • Attract the best scientists, engineers, technicians and support staff
  • Inform scientists about training opportunities and services

We are a group of user experience specialists in an international scientific organisation

Our aim is to help teams design services to meet the needs of their users

We believe in openness , transparency, working collaboratively and iteratively, continuously learning and sharing knowledge throughout the organisation

EMBl-EBI Web Development UX Team Mission

Anastasia Vlasiuk in the lab
Anastasiia Vlasiuk, PhD student in the Asari group, recording the visual responses of an isolated retina. PHOTO: Marietta Schupp/EMBL
Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"exampleMultiColumns" : "false",
"component-type" : "block",
"type" : "floating",
"example" : true,
 }
%}
{% include "../path_to/vf-back-to-top/vf-back-to-top.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-back-to-top', {
  "exampleMultiColumns" : "false",
  "component-type" : "block",
  "type" : "floating",
  "example" : true,}
%}
                
React syntax

import { VfBackToTop } from "@visual-framework/vf-back-to-top/vf-back-to-top.react.js";
// or
import { VfBackToTop } from "@visual-framework/vf-back-to-top/vf-back-to-top.jsx";
<VfBackToTop parameter="value" />
                  

For individual parameter names and options, see the Nunjucks syntax example. Also follow the React setup guide. Note: React support is in its early pre-alpha stage and not all component are yet supported.

HTML
<!-- this HTML is for example use only -->
<div class="" style="position: relative;" id="top">
  <div class="vf-content">
    <h1 id="embl-communications-strategy-2018-2020">EMBL communications strategy 2018-2020</h1>


    <p class="vf-content__standfirst">This <a href="#">communications strategy</a> outlines EMBL’s vision, mission and goals. It is intended to support everyone who communicates on behalf of EMBL, within and outside of the organisation, in order to provide aligned messaging and help EMBL to achieve its goals. The strategy is supported by an operational plan for the Strategy and Communications team.</p>
    <p class="vf-content__standfirst">The plan reflects the priorities defined in the communications strategy and translates them into a set of deliverables and projects managed by the Strategy and Communications team. This documentation will be regularly reviewed and revised. Your feedback is welcome at any time: please contact EMBL’s Strategy and Communications team.</p>
    <small><i>This document was last revised 7 March 2018</i></small>

    <h2 id="section-1-embls-vision-and-mission">Section 1: EMBL’s vision and mission</h2>
    <h3 id="embls-vision">EMBL’s vision</h3>
    <p>Enabling scientists worldwide to discover the secrets of life</p>
    <h3 id="embls-mission">EMBL’s mission</h3>
    <ol>
      <li>Uncovering the molecular basis of life through research</li>
      <li>Providing research infrastructure and services</li>
      <li>Training and inspiring the next generation of scientists</li>
      <li>Driving research, innovation and progress through technology development</li>
      <li>Interactions with industry and technology transfer</li>
      <li>Playing a leading role in the integration of life science research</li>
    </ol>
    <h3 id="further-examples-of-bullets">Further examples of bullets</h3>
    <ul>
      <li>A bulleted item</li>
      <li>A nested bulleted item</li>
      <li>A nested bulleted item</li>
      <li>A bulleted item</li>
      <li>A bulleted item</li>
      <li>A bulleted item</li>
      <li>A bulleted item</li>
    </ul>
    <h3 id="definition-lists">Definition lists</h3>
    <dl>
      <dt>Beast of Bodmin</dt>
      <dd>A large feline inhabiting Bodmin Moor.</dd>

      <dt>Morgawr</dt>
      <dd>A sea serpent.</dd>

      <dt>Owlman</dt>
      <dd>A giant owl-like creature.</dd>
    </dl>


    <table>
      <thead>
        <tr>
          <th scope="col">Event</th>
          <th scope="col">Date</th>
          <th scope="col">Type</th>
          <th scope="col">Location</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>dave</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores.</td>
          <td>roger</td>
          <td>London, U.K.</td>
        </tr>
        <tr>
          <td>dave</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet.</td>
          <td>roger</td>
          <td>London, U.K.</td>
        </tr>
        <tr>
          <td>dave</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
          <td>roger</td>
          <td>London, U.K.</td>
        </tr>
      </tbody>
    </table>

    <h3>What is EMBL?</h3>
    <p>EMBL is Europe’s flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.</p>
    <p>EMBL performs fundamental research in molecular biology, studying the story of life. We offer services to the scientific community; train the next generation of scientists and strive to integrate the life sciences across Europe.</p>

    <figure>
      <img src="../../assets/vf-figure/assets/figure-example.png" alt="An example figure image" loading="lazy">
      <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.</figcaption>
    </figure>

    <figure>
      <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20201202_hero_emblorg_homepage-zoom-out.jpg" alt="An example figure image" loading="lazy">
      <figcaption>A very wide image.</figcaption>
    </figure>

    <p>We are international, innovative and interdisciplinary. We are more than 1600 people, from over 80 countries, operating across six sites in Barcelona (Spain), Cambridge (UK), Grenoble (France), Hamburg (Germany), Heidelberg (Germany), and Rome (Italy). Our scientists work in independent groups and conduct research and offer services in all areas of molecular biology.</p>
    <p>Our research drives the development of new technology and methods in the life sciences. We work to transfer this knowledge for the benefit of society.</p>

    <h2>Section 2: EMBL’s goals</h2>

    <h3>Goal 1: Advancing society</h3>
    <p>The fundamental knowledge that we create, enable and share is immensely valuable to society. Life-science research and services help to address society’s grand challenges, from human health, agriculture, to the environment and beyond.</p>

    <h4>Communications goals:</h4>
    <p>Show the impact of our work in tackling society’s big challenges</p>

    <h3>Goal 2: Enable excellent science to advance our understanding of life</h3>
    <p>We support scientists worldwide with infrastructure, services, technologies, training and platforms for exchange to carry out the best possible research. We are driven by curiosity about life, the most exciting story in the universe. We believe that advancing humankind’s understanding of life is a noble goal in itself.</p>

    <h4>Communications goals:</h4>
    <ul>
      <li>Develop and sustain support for EMBL from important stakeholders</li>
      <li>Attract the best scientists, engineers, technicians and support staff</li>
      <li>Inform scientists about training opportunities and services</li>
    </ul>

    <blockquote>
      <p>We are a group of user experience specialists in an international scientific organisation</p>
      <p>Our aim is to help teams design services to meet the needs of their users</p>
      <p>We believe in openness , transparency, working collaboratively and iteratively, continuously learning and sharing knowledge throughout the organisation</p>
      <p><cite>EMBl-EBI Web Development UX Team Mission</cite></p>
    </blockquote>

    <figure>
      <img src="https://news.embl.de/wp-content/uploads/2019/11/Anastasia-Vlasiuk.jpg" alt="Anastasia Vlasiuk in the lab" loading="lazy">
      <figcaption>Anastasiia Vlasiuk, PhD student in the Asari group, recording the visual responses of an isolated retina. PHOTO: Marietta Schupp/EMBL</figcaption>
    </figure>

  </div>

  <div class="vf-back-to-top vf-back-top--floating" data-vf-js-back-to-top data-vf-js-back-to-top-floating>
    <a class="vf-button vf-button--secondary vf-button--sm" aria-label="Back to top">
      <svg class="vf-icon vf-icon--search-btn | vf-button__icon" viewBox="0 0 140 140" width="16" height="16">
        <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
          <path d="M23.421,11.765,13.768.8A2.641,2.641,0,0,0,12,0a2.645,2.645,0,0,0-1.768.8L.579,11.765A1.413,1.413,0,1,0,2.7,13.632l7.45-8.466a.25.25,0,0,1,.437.166V22.587a1.413,1.413,0,1,0,2.826,0V5.332a.25.25,0,0,1,.438-.165L21.3,13.632a1.413,1.413,0,1,0,2.121-1.867Z" fill="#3b6fb6" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
        </g>
      </svg>
      Back to top
    </a>
  </div>

  <!-- this HTML is for example use only -->
</div>
              

Examples

Installation info

This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-back-to-top with this command.

$ yarn add --dev @visual-framework/vf-back-to-top

JS

You should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:

import { vfBackToTop } from 'vf-back-to-top/vf-back-to-top';
// Or import directly
// import { vfBackToTop } from '../components/raw/vf-back-to-top/vf-back-to-top.js';
vfBackToTop(); // invoke it

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-back-to-top/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.0.1

  • Updated the Back to Top button to secondary and changed arrow colour.
  • Tracking issue

1.0.0-alpha.2

1.0.0-alpha.1

Assets



File system location: components/vf-back-to-top

Find an issue on this page? Propose a change or discuss it.