跳轉到X方向上的ID標記

Question

我目前在這裏使用它來跳轉到頁面上的一個id標記，雖然我需要能夠跳轉到X方向，如果可能的話，那將是很棒的嗎？

所以基本上我只想一個按鈕，將滾動到放置在頁面的X方向相同，因爲它會垂直:)

//anchors 
    function filterPath(string) { 
    return string 
     .replace(/^\//,'') 
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
     .replace(/\/$/,''); 
    } 

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

Answer 1

我希望一個div，這是我理解你的問題:) http://jsfiddle.net/QWLEW/

​<div style="width: 1500px; overflow: visible;"> 
    <a href="#foo">Goto div</a> 
    <div id="foo" style="width: 100px; position:absolute; left: 1000px;">Here Iam</div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

當你點擊鏈接時，頁面會跳轉到id FOO股利。

並與動畫。 （編輯你的代碼） 它現在也是它的水平位置。我刪除了+90像素，因爲我不知道，你試圖用這個來實現。

http://jsfiddle.net/g47bn/

//anchors 
    function filterPath(string) { 
    return string 
     .replace(/^\//,'') 
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
     .replace(/\/$/,''); 
    } 

    $('a[href*=#]').each(function() { 
    if (filterPath(location.pathname) == filterPath(this.pathname) 
    && location.hostname == this.hostname 
    && this.hash.replace(/#/,'')) { 
     var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']'); 
     var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; 
     if ($target) { 
     $(this).click(function() { 
      //Use offset top and left to go to the divs position 
      $('html, body').animate({scrollTop: $target.offset().top, scrollLeft: $target.offset().left}, 600); 
      return false; 
     });   
     } 
    } 
    });​ 

如果您只想滾動頂部或左側，這裏刪除其他ptoperty形式。

$（'html，body'）。animate {{} {}}}}}}}。

Answer 2

這裏有一個辦法，似乎工作：

$('a').click(
    function(e){ 
     // prevents the default 'jump' 
     e.preventDefault(); 
     // caches the href of the clicked link 
     var href = this.href, 
      // takes the href, splits off the '#' character (and anything before it) 
      // and uses that to find the id of the target element. 
      target = $('#' + href.substring(href.indexOf('#') + 1)), 
      // finds, and caches the offsets 
      offsets = target.offset(), 
      // finds the offset of the top of the element (relative to the page) 
      top = offsets.top, 
      left = offsets.left; 
     // animates the movement to the top, and the left, position of the target 
     $('body').stop().animate({ 
      scrollTop : top, 
      scrollLeft : left 
     }, 1000); 
    });​ 

JS Fiddle demo。

修訂以上，使用split()代替substring()：

$('a').click(
    function(e){ 
     e.preventDefault(); 
     var href = this.href, 
      // as above, but more concise 
      target = $('#' + href.split('#')[1]), 
      offsets = target.offset(), 
      top = offsets.top, 
      left = offsets.left; 
     $('body').stop().animate({ 
      scrollTop : top, 
      scrollLeft : left 
     }, 1000); 
    });​ 

JS Fiddle demo。

而且，如果你想有兩個不同的滾動事件，該版本將有助於利用：

$('a').click(
    function(e) { 
     e.preventDefault(); 
     var target = $('#' + this.href.split('#')[1]), 
      offsets = target.offset(), 
      top = offsets.top, 
      left = offsets.left; 
     $('body').stop().animate({ 
      scrollTop: top 
     }, 1000, function() { 
      $(this).animate({ 
       scrollLeft: left 
      }, 1000); 
     }); 
    });​ 

JS Fiddle demo。