0

現在、これを使用してページの 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;
         });         
      }
    }
  });
4

2 に答える 2

1

うまくいくと思われるアプローチの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 フィドルのデモ。

また、2 つの異なるスクロール イベントが必要な場合は、このバージョンが役に立ちます。

$('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 フィドルのデモ。

于 2012-08-01T09:38:51.617 に答える
0

私はあなたの質問を理解したと思います:) 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 px を削除しました。

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

于 2012-08-01T09:10:42.503 に答える