jquery - 跳转到 X 方向的 ID 标签

Question

我目前在这里使用它来跳转到页面上的 id 标记，尽管如果可能的话我还需要能够跳转到 X 方向，这会很棒吗？

所以基本上我只想要一个按钮，该按钮将滚动到放置在页面 x 方向上的 div ，与垂直方向相同:)

//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

这是一种似乎有效的方法：

$('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 小提琴演示。

修改了上述内容，以使用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 小提琴演示。

而且，如果你想拥有两个不同的滚动事件，这个版本会有所帮助：

$('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 小提琴演示。

Answer 2

我希望我理解你的问题:) 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 的 div。

并带有动画。（编辑你的代码）它现在也要去它的水平位置。我删除了 +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({ scrollTop: $target.offset().top, scrollLeft: $target.offset().left }, 600);