2

状況:アンカー リンクごとに、アンカー リンクまでスムーズにスクロールしたい。次に、特定のアンカー リンクのオフセットを設定します (たとえば、ナビゲーションのリンクのみで、サイトのアンカー リンクはありません)。そして最後に、メディアクエリを追加したい..オフセット位置は、定義されたブラウザーサイズ (「最大幅: 767px」など) でのみ機能する必要があります。

最初の問題:他の機能 (オフセット配置) が無効になっている場合にのみ、スムーズなスクロールが機能します。両方を一緒に使用しても機能しません。何か助けはありますか？ 2 番目の問題:「オフセット ポジショニング」を「ナビゲーション」アンカー リンクのみに減らす方法がわかりません。

// Smooth Scrolling
$(function () {
  'use strict';
  $('a[href*=#]').click(function () {
    if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 300);  
        return false;
      }
    }
  });
});

// Offset Positioning
function offsetAnchor() {
  'use strict';
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 0); 
  }
}

// Offset Positioning with media query
function offsetAnchor() {
  'use strict';
  if (matchMedia('only screen and (max-width: 767px)').matches) {
    if (location.hash.length !== 0) {
      window.scrollTo(window.scrollX, window.scrollY - 220);
    }
  }
}

// This will capture hash changes while on the page
$(window).on("hashchange", function () {
  'use strict';
  offsetAnchor();
});

ここや他のサイトを検索してコードを取得しました。自分で書いたわけではありません。早くjavascriptとjqueryの基礎を学びたいです。しかし、皆さんから今すぐ助けを得ることができれば素晴らしいことです。本当にありがとうございました！

ボリス

4

2 に答える 2

0

OK、ここで他のコードを見つけました： アンカーリンクをクリックしたときのスムーズスクロール

そして、それを一度複製して、メディアクエリ、オフセット、および特定のクラス (ul.nav a) を追加しました。問題がないことを願っています-今のところ、私にとっては非常にうまく機能しています. これが有用な解決策であることを願っています! コードも小さくなります。

「問題」が 1 つだけ:ページが 2 回スクロールします。最初はアンカーまでスクロールし、2 回目は再び 220px 上にスクロールします (オフセット)。ページがオフセット位置に直接 1 回だけスクロールされるとよいでしょう。

// Smooth Scrolling
var $root = $('html, body');
$('a').click(function () {
  'use strict';
  $root.animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 500);
  return false;
});

// Smooth Scrolling with offset and media-query
var $root = $('html, body');
$('ul.nav a').click(function () {
  'use strict';
  if (matchMedia('only screen and (max-width: 767px)').matches) {
    $root.animate({
      scrollTop: $($.attr(this, 'href')).offset().top - 220
    }, 500);
    return false;
  }
});
于 2015-08-12T21:30:31.233 に答える