2

別のページにある特定の投稿に自分のWebサイトをスクロールさせようとしています。私はこの背後にあるPHPの部分を考えてアンカーを生成しましたが、JSの部分で立ち往生しています。Webページを0,0の位置から開始し、静的アンカータグに移動することができました。私が苦労しているのは、JSに現在のURLからアンカータグをフェッチさせ、少し遅れて指定されたタグにスムーズにスクロールさせる方法です。

私の現在のコードは次のとおりです。

$(document).ready(function() {
    if (location.hash) {
        window.scrollTo(0, 0);
      }
});

setTimeout("window.location.hash = '#scroll';", 5000);

URLからアンカータグをフェッチするsnippedを次のように見つけましたが、少し遅れて実行させる方法がわかりません。

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

    });
4

2 に答える 2

0

CSS-Tricks フォーラムで見つけたスニペットを使用して問題を解決できました。ページの読み込み時に、常にページの一番上からアンカー タグまでスクロールします。

$(window).bind("ready", function() {
   var urlHash = window.location.href.split("#")[1];
    $('html,body').animate({scrollTop:$('a[href="#'+urlHash+'"]').offset().top}, 1500);        
});
于 2012-11-10T17:35:45.060 に答える
0

setTimeout が文字列として渡された古いコードを受け入れるとは思わず、関数名のみを受け入れます。代わりに匿名関数を使用してみてください。

setTimeout(function() { window.location.hash = '#scroll'; }, 5000);

于 2012-11-08T20:19:31.440 に答える