平滑滚动到锚点。不同的偏移量。媒体查询。排除一些锚点答案

【问题标题】：Smooth Scrolling to anchors. Different offsets. Media Queries. Excluding some anchors平滑滚动到锚点。不同的偏移量。媒体查询。排除一些锚点
【发布时间】：2015-11-05 15:37:21
【问题描述】：

情况：我想要平滑滚动到锚链接，对于每个锚链接。接下来我想为特定的锚链接设置偏移量（例如，只有导航的链接，但没有网站上的锚链接）。最后我想添加媒体查询..所以偏移位置应该只适用于定义的浏览器尺寸（例如“最大宽度：767px”）。

第一个问题：只有在禁用其他功能（偏移定位）时，我的平滑滚动才有效。两者一起不起作用。有什么帮助吗？ 第二个问题：我不知道如何仅将“偏移定位”减少为“导航”锚链接。

// 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();
});

我通过搜索here和其他网站获得了代码，我没有自己编写。我想尽快学习 javascript 和 jquery 的基础知识。但是现在能得到你们所有人的帮助会很棒。万分感谢！

鲍里斯

【问题讨论】：

标签： javascript jquery offset anchor-scroll scroll-position

【解决方案1】：

好的，我在这里找到了一些其他代码： Smooth scrolling when clicking an anchor link

我已经复制了一次以添加一些 媒体查询、偏移量和特定类 (ul.nav a)。 我希望没有问题 - 直到现在它对我来说都很好.希望这是一个有用的解决方案！甚至代码更小。

只有一个“问题”：页面滚动了两次。起初它滚动到锚点，第二次它再次向上滚动 220px（偏移量）。 如果页面直接滚动到偏移位置一次就好了！

// 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;
  }
});

【讨论】：

【解决方案2】：

最后，我针对平滑滚动问题进行了优化。我认为媒体查询更加清晰易懂。奇怪的“向下滚动并再次向上滚动一些像素”效果现在也消失了。

// 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;
  });
}

我只是一名设计师，所以我通过反复试验得到了它。我不明白每一行，例如“console.log ...”。我敢打赌代码可以减少更多。

所以如果有人想优化/减少代码，那就太好了！ :)

【讨论】：