kokimu
5/10/2018 - 6:34 PM

Smooth Scroll to Anchor

This creates a conflict with MODAL POP-UP, so don't combine them !!
Arrow created with CSS only, no image file used.
Smooth Scrolling | CSS-Tricks - CSS-Tricks


// Smooth scroll to anchor
// Wroks as is!

jQuery($ => {
  // The speed of the scroll in milliseconds
  const speed = 1000;

  $('a[href*="#"]')
    .filter((i, a) => a.getAttribute('href').startsWith('#') || a.href.startsWith(`${location.href}#`))
    .unbind('click.smoothScroll')
    .bind('click.smoothScroll', event => {
      const targetId = event.currentTarget.getAttribute('href').split('#')[1];
      const targetElement = document.getElementById(targetId);

      if (targetElement) {
        event.preventDefault();
        $('html, body').animate({ scrollTop: $(targetElement).offset().top }, speed);
      }
    });
});
// Smooth Scroll to Anchor within page
// Arrow created with CSS only, no image file used.

.arrow.scroll {
	text-align: center;

	a {
		position: absolute;
		bottom: 0;
		margin-left: -15px;
		margin-bottom: 30px;

		display: inline-block;
		width: 24px;
		height: 24px;
		border-top: 2px solid $beige;
		border-left: 2px solid $beige;
		-webkit-transform: rotate(225deg);
		transform: rotate(225deg);
	}
}
<!--Smooth Scroll to Anchor within page-->

<p class="arrow scroll">
	<a href="#inner-content" title="Services"></a>
</p>
/********************************
Smooth Scroll Anchors within page 
*********************************/

$('a[href*=#]:not([href=#])').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 700);
      return false;
    }
  }
});