Question

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

所以基本上我只想要一个按钮，滚动到一个div，它放在页面的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

以下是一种似乎有效的方法：

$('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

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）;

在X方向跳转到ID标签

2 个答案: