Smooth Scrolling to anchors. Different offsets. Media Queries. Excluding some anchors

Question

Situation: I want to get smooth scrolling to anchor links, for every anchor link. Next i want to set an offset for specific anchor links (for example only the links of the navigation, but none of the anchor links on the site). And at last i want to add media queries.. so the offset position should only work at defined browser sizes (for example "max-width: 767px").

First problem: my smooth scrolling only works, if the other function (offset positioning) is disabled. Both together does not work. Any help? Second problem: I don't know how to reduce "offset positioning" to "navigation" anchor links only.

// Smooth Scrolling
$(function () {
  'use strict';
  $('a[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
        }, 300);  
        return false;
      }
    }
  });
});

// Offset Positioning
function offsetAnchor() {
  'use strict';
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 0); 
  }
}

// Offset Positioning with media query
function offsetAnchor() {
  'use strict';
  if (matchMedia('only screen and (max-width: 767px)').matches) {
    if (location.hash.length !== 0) {
      window.scrollTo(window.scrollX, window.scrollY - 220);
    }
  }
}

// This will capture hash changes while on the page
$(window).on("hashchange", function () {
  'use strict';
  offsetAnchor();
});

I got the code by searching here and other sites, i didn't write it myself. I want to learn the basics of javascript and jquery soon. But it would be great to get help right now from you all. Thank you a lot!

boris

Answer 1

I got an optimization for my issue for smooth scrolling, finally. I think the media queries are much cleaner and understandable. Also the strange "scroll down and scroll some pixel up again"-effect is gone now.

// smooth scrolling

function screenMin768() {
  'use strict';
  var mq = window.matchMedia("(min-width: 768px)");
  return mq.matches;
}

function screenMax767() {
  'use strict';
  var mq = window.matchMedia("(max-width: 767px)");
  return mq.matches;
}

console.log(screenMin768() + " " + screenMax767());

if (screenMin768()) {
  var $root = $('html, body');
  $('a').click(function () {
    'use strict';
    $root.animate({
      scrollTop: $($.attr(this, 'href')).offset().top - 55 // hier die variable aufrufen: "+ offset55"
    }, 500);
    return false;
  });
}

// offset for normal a-tags, excluding mobile nav: ul.nav a
if (screenMax767()) {
  var $root = $('html, body');
  $('a:not(ul.nav a)').click(function () {
    'use strict';
    $root.animate({
      scrollTop: $($.attr(this, 'href')).offset().top + 4
    }, 500);
    return false;
  });
}

// offset for mobile nav: ul.nav a
if (screenMax767()) {
  var $root = $('html, body');
  $('ul.nav a').click(function () {
    'use strict';
    $root.animate({
      scrollTop: $($.attr(this, 'href')).offset().top - 270
    }, 500);
    return false;
  });
}

// offset correction for go-to-top button on mobile screen width
if (screenMax767()) {
  var $root = $('html, body');
  $('a.go-to-top').click(function () {
    'use strict';
    $root.animate({
      scrollTop: $($.attr(this, 'href')).offset().top - 60
    }, 500);
    return false;
  });
}

I am a designer only, so I got it by trial and error. I don't understand every line, for example "console.log ...". And I bet the code can be reduced much more.

So if anybody want to optimize / reduce the code, it would be great! :)

Answer 2

Ok, i found some other code here: Smooth scrolling when clicking an anchor link

And I've duplicated it once to add some media-query, offset and specific class (ul.nav a). I hope there are no problems - until now it works very fine for me. Hope this is a usefull solution! Even the code is smaller.

Only one "problem": The page scrolls two times. At first it scrolls to the anchor and a second time it scrolls 220px up again (the offset). It would be great if the page would only scroll one time to the offset position directly!

// Smooth Scrolling
var $root = $('html, body');
$('a').click(function () {
  'use strict';
  $root.animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 500);
  return false;
});

// Smooth Scrolling with offset and media-query
var $root = $('html, body');
$('ul.nav a').click(function () {
  'use strict';
  if (matchMedia('only screen and (max-width: 767px)').matches) {
    $root.animate({
      scrollTop: $($.attr(this, 'href')).offset().top - 220
    }, 500);
    return false;
  }
});