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

50 IT屋

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 [];
  }

});

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)

Thanks for any help.

解决方案

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.

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.

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锚定点:



  $(document).ready(function( ){
函数filterPath(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).animat e({scrollTop:targetOffset},400,function(){
location.hash = target;
});
});
}
}
});

//使用第一个可滚动的元素
函数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)



感谢您的帮助。


解决方案

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



现在,对您来说令人不安的代码部分是location.hash-这是告诉浏览器将其位置设置为特定点。在所有情况下,这都是一个包含您刚刚滚动到的ID的字符串。因此,类似于 #foo。



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



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



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

本文地址:IT屋 » jQuery滚动到锚点(减去设置的像素数量)