How to implement similar in css/html/js?

Question

css

Such a button is called something like an anchor, right?
did like this (without "a")

<div class="scroll "><i class="fa fa-arrow-down"></i></div>

prescribed styles, well, it’s clear
now how best to implement it so that when you click on a div, the page smoothly leaves for a section below?
how to write it in js?
I can’t find it on the Internet, it doesn’t knock out what I need like
http://http://htmlbook.ru/samhtml/yakorya
, but I have a block with an icon. MM?

Answer 1

There will be no smooth scrolling on anchors, as you say , so only js
Longhorn gave garbage, this is code for one browser, somewhere it will not work either in mozilla or in chrome or in opera. even on Habré rubbed.
It’s not necessary body.animate, but it’s necessary ('body,html').animate(exaggerated)
Here is from the working draft, here you scroll to the block with id="map", and the second link scrolls to the block with id="box_middle" if you don't want links, then make data attributes and go ahead:

<a href="#map" class="go_bottom go_link"></a>
<a href="#box_middle" class="go_middle go_link"></a>

jQuery('a.go_link').click(function(event) {
  event.preventDefault();
  var id  = jQuery(this).attr('href');
  if (jQuery(id).length != 0) {
    var top = jQuery(id).offset().top;
    top = top-96;
    jQuery('body,html').animate({scrollTop: top}, 1500);
  }
});

Answer 2

here

Answer 3

https://greensock.com/
https://greensock.com/ScrollToPlugin

$(".scroll").on("click", function() {
  TweenLite.to(window, 2, {
    scrollTo: window.innerHeight 
  });
});