jQuery滚动至锚点(减去设置的像素数量) [英] jQuery scroll to anchor (minus set amount of pixels)

问题描述

我正在使用以下代码滚动到jQuery锚定点:

I am using the following code to scroll to anchor points with jQuery:

$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }

});

有没有办法让它滚动到该锚点，但要减去一定数量的像素? (就我而言，我希望它达到-92px)

Is there anyway to make it scroll to that anchor but minus a set amount of pixels? (in my case i want it to go -92px)

感谢您的帮助.

推荐答案

我只需要自己解决此问题.您需要根据您想滚动到的像素数量来调整偏移量.就我而言，我需要页面上的像素高50像素.因此，我从targetOffset中减去了50.

I just had to solve this problem myself. You need to adjust your offset by the amount of pixels you want to scrollTo. In my case, I needed it to be 50 pixels higher on the page. So, I subtracted 50 from targetOffset.

现在，为您带来混乱的代码部分是location.hash-这是告诉浏览器将其位置设置为特定点.在所有情况下，这都是一个包含您刚刚滚动到的ID的字符串.因此，它将类似于"#foo".您需要对此进行维护，因此我们将其保留.

Now, the part of the code that's throwing a wobbly for you is location.hash - this is telling the browser to set its location to a specific point. In all cases, this is a string containing the ID you just scrolled to. So, it'd be something like '#foo'. You need to maintain this, so we'll leave it.

但是，要防止在设置location.hash时浏览器跳转"(默认浏览器操作)，您只需要阻止默认操作即可.因此，通过动画函数中的完成函数传递事件"e".然后只需调用e.preventDefault().您必须确保浏览器实际上正在调用事件，否则它将出错.因此，如果测试可以解决该问题.

However, to prevent the browser from 'jumping' when location.hash is set (a default browser action), you simply need to prevent the default action. So, pass your event 'e' through the completion function in the animate function. Then simply call e.preventDefault(). You'll have to make sure that the browser is actually calling an event, otherwise it will error out. So, an if-test fixes that.

完成.这是修改后的代码块:

Done. Here's the revised code chunk:

if (target) {
    var targetOffset = $target.offset().top - 50;
    $(this).click(function(event) {
      if(event != 'undefined') {
          event.preventDefault();}
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function(e) {
          e.preventDefault();
          location.hash = target;
      });
    });
  }

这篇关于jQuery滚动至锚点(减去设置的像素数量)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！