Scroll Down Button und Back to Top?

(…) program a scroll down button that scrolls me to content when pressing on it (…) In addition, I would also like a back to top button (…)

Give the button an event lister to the click here-Event listens. When the event is triggered, you can use the scrollTo– Scroll function up or down.

const scrollingElement = (document.scrollingElement || document.body);

// scroll to bottom:
window.scrollTo({ top: scrollingElement.scrollHeight, behavior: 'smooth' });

// scroll to top:
window.scrollTo({ top: 0, behavior: 'smooth' });

The scroll down button should be 3 arrows flashing from top to bottom.

In principle, I would always dispense with flashing effects because they interfere with the page visitor when reading the page content.

Nevertheless: For implementation, I would use Inline-SVG (each arrow corresponds to a separate SVG-Path; use SVG online editors or search for finished SVG-Icons). You can then animate all three SVG elements with CSS. You should achieve the appropriate effect by changing the arrow color (example: arrow 1 after 1s, arrow 2 after 2s, arrow 3 after 3s).

And the Back to Top Button (…)

You can also work with SVG. The positioning and hover effects are successful with CSS.

Example:

.back-to-top {
  bottom: 20px;
  position: fixed;
  right: 20px;
}

.back-to-top:hover {
  fill: red;
}

Unfortunately I find nothing suitable on the Internet (…)

CSS, SVG and JavaScript references can be found here:

• MDN
• MediaEvent
• selfhtml
• W3Schools