Smooth Scrolling

by Zsanett Tamás

HTML

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>

<body>
  <a id="button"></a>
  <header class="header" id="header">
    <nav role="navigation" class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">
            <img src="https://via.placeholder.com/150/0000FF/808080 ?Text=Digital.com 

C/O https://placeholder.com/" alt="logo">
        </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a href="#!aboutUs" class="nav-link">About Us <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#!competences">Competences</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#!career">Carrer</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#!contact">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="jumbotron">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
      <a class="btn btn-primary btn-lg" href="#" role="button">Learn...

CSS

img {
  width: 50px;
}

/*** header ***/

/** ------------------------------------------------------------------------------- **/

/** ------------------------------------------------------------------------------- **/

header {
  position: fixed;
  z-index: 9999;
  background: pink;
  width: 100%;
  opacity: 0.8
}

.jumbotron h1 {
  margin-top: 25px;
}

.section-headline {
  letter-spacing: 25px;
  text-transform: uppercase;
  font-weight: 700;
  color: #4d4d4f;
  text-align: center;
  padding: 30px;
  width: 100%;
}

hr.schr {
  width: 155px;
  height: 5px;
  margin-top: -35px;
  background-color: pink;
}

/*** back-to-top css ***/

#button {
  display: inline-block;
  background-color: pink;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  margin: 30px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s;
  z-index: 1000;
}

#button:hover {
  cursor: pointer;
  background-color: #333;
}

#button:active {
  background-color: #555;
}

#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

JavaScript

let SCROLL_BY_CLASS_NAME = 'nav-link';

/*back-to-top function*/
var btn = $('#button');

$(window).scroll(function() {
  if ($(window).scrollTop() > 300) {
    btn.addClass('show');
  } else {
    btn.removeClass('show');
  }
});

btn.on('click', function(e) {
  e.preventDefault();
  $('html, body').animate({
    scrollTop: 0
  }, '300');
});


window.addEventListener('click', function(evt) {

  if (evt.srcElement.className === SCROLL_BY_CLASS_NAME) {
    var scrollToId = evt.target.href.split('!')[1];
    var scrollToElement = document.getElementById(scrollToId);
    var scrollToY = scrollToElement.offsetTop - getFullHeight(scrollToElement);
    window.scroll(0, scrollToY);
  }

});

var getFullHeight = function(element) {

  var offsetHeight = element.offsetHeight;
  var topPaddingHeight = removePxString(getStyleValue(element, 'padding-top'));
  var bottomPaddingHeight = removePxString(getStyleValue(element, 'padding-bottom'));
  var topMarginHeight = removePxString(getStyleValue(element, 'margin-top'));
  var bottomMarginHeight = removePxString(getStyleValue(element, 'margin-bottom'));
  var topBorderHeight = removePxString(getStyleValue(element, 'border-top'));
  var bottomBorderHeight = removePxString(getStyleValue(element, 'border-bottom'));

  return sum([
    /* offsetHeight, */
    topPaddingHeight,
    bottomPaddingHeight,
    topMarginHeight,
    bottomMarginHeight,
    topBorderHeight,
    bottomBorderHeight
  ]);

};

var removePxString = function(str) {

  return str.substring(0, str.length - 2);

};

var getStyleValue = function(element, propertyName) {

  return window.getComputedStyle(element).getPropertyValue(propertyName);

};

var sum = function(itemsArray) {

  var sum = 0;

  for (var i = 0; i < itemsArray.length; i++) {
    sum = sum + parseInt(itemsArray[i]);
  }

  return sum;

};