Fandom Developers Wiki
Advertisement

このページ(の一部)は、翻訳が必要です。 (日本語への)翻訳にご協力ください。

BackToTopButtonは、押されたときにページの先頭に戻るようにする、Oasisフッターの右隅にボタンを追加します。

導入方法[]

カスタマイズ[]

スクロール速度を上げたり、ボタンを表示させるために必要なスクロールダウン量やその他のオプションを調整したい場合は、スクリプトをインポートする前に次の行を追加してください(global .js)またはあなたのコミュニティのWikia.jsページに移動します。

Modernization[]

The button has two variants, a modern one and the old one. The old one is shown by default, but if you want to enable the modern behavior you can use:

window.BackToTopModern = true;

Arrow icon[]

If you want to use the old variant of the button but display an arrow instead of a button, you can use:

window.BackToTopArrow = true;

ボタンテキスト[]

ボタンのテキストは自動的にユーザーの言語で表示されます。ただし、テキストを変更する場合は、次のように変更することができます。

window.BackToTopText = "new text";

スクロール速度[]

スクロール速度を調整するには、これを追加します:

window.BackToTopSpeed = number;

number は速度(ミリ秒)です。数値が大きいほどスクロールが遅くなり、数値が小さいほどスクロールが速くなります。デフォルト値は600です。

ボタンの外観[]

ボタンを表示/消滅させるために必要な「深度」を調整するには、次のように追加します:

window.BackToTopStart = number;

number は、ボタンが表示される前のページの下の距離(ピクセル単位)です。数字が大きいほど、ボタンが表示される前にさらにスクロールします。デフォルト値は800です。

ボタンのフォーマット[]

CSSで好きなようにボタンを書式設定することもできます。例えば:

/* Back-to-top button format */
#BackToTopBtn div {
    opacity: 0.7;
    transition: .5s;
}
#BackToTopBtn div:hover {
    opacity: 1;
}

上記のCSSルールは、ボタンを単純なリンクのように見せます。

/* Back-to-top button format */
#backtotop button{
    background: none;
    background-color: transparent;
    color: white;
    border: none;
}
#backtotop button:hover {
    text-decoration: underline;
}

The above CSS rules will make the button look like a simple link. This works only on the old variant of the button.

ボタンのフェードイン/アウト効果を無効にする[]

フェード効果を無効にするには、次のように追加します。

window.BackToTopFade = 0;

Using configuration options with Fandom Developers Wiki scripts

The instructions on this page describe how to use configuration options with a script. Here on the Fandom Developers Wiki, many scripts provide optional configuration settings as a mean to alter or enhance the default behavior of the script. When installing configuration options in your JavaScript file, please note that they need to go above the import statement in order to work — unless the directions say otherwise. In case MediaWiki:ImportJS is used to load the scripts, it will be executed last.

Configuration options load too late, don't work
// 1. AjaxRC import statement
importArticles({
    type: 'script',
    articles: [
        'u:dev:MediaWiki:AjaxRC.js'
    ]
});

// 2. AjaxRC configuration option
window.ajaxRefresh = 30000;
Proper placement of configuration options
// 1. AjaxRC configuration option
window.ajaxRefresh = 30000;

// 2. AjaxRC import statement
importArticles({
    type: 'script',
    articles: [
        'u:dev:MediaWiki:AjaxRC.js'
    ]
});

エフェクトを再度有効にするには、この行をJSページから削除します。 ボタンのフェードイン/アウトエフェクトは、デフォルトでオンになっています。

Advertisement