同じ高さで一番上のボタンまでスクロールし続けますか?

異端者

ボタンに問題があります。高さのウィンドウサイズを変更したときに、ボタンを同じ高さに保つにはどうすればよいですか?高さが変わるので、それを追いかけたり、押し下げたりしたくありません...

http://jsfiddle.net/ccq9cs9L/3/

HTML

<a href="#" class="scrollToTop hidden-phone">
    <span class="icon icon-arrow-up-white"></span>
</a>
<div class="myDiv">
    <div class="myContent">
        a lot of text
    </div>
</div>

CSS

a.scrollToTop {
    content: "";
    z-index: 1000;
    width: 60px;
    height: 45px;
    background: #78b209;
    position: fixed;
    top: 35.5%;
    right: 0;
    display: none;
}

JavaScript

$(document).scroll(function(e) { // This is scrollToTop button
    e.preventDefault();
    if ($(this).scrollTop() > 100) {
        $('.scrollToTop').fadeIn(); 
    } else {
        $('.scrollToTop').fadeOut(); 
    }
});
$('.scrollToTop').click(function () { // Scroll to top with ease
    $('html, body').animate({ scrollTop: 0 }, 1000, 'easeOutExpo');
    return false;
});
スマート

私があなたを正しく理解しているなら、あなたの質問は実際にはCSSについてです。top: 35.5%;たとえば、静的な量に変更してみてくださいtop: 100px;

ピクセル量をビューポートの高さに基づいて設定したい場合は、次の方法で取得できます。

$(window).height();

したがって、ボタンを常に上からN%の位置に表示し、ビューポートのサイズを変更してもボタンをそのままにしておくには、次のようにします。

function positionButton() {
    var percFromTop = 35,
        newHeight = $(window).height() / 100 * percFromTop;
    $(".scrollToTop").css("top", newHeight+"px");
}

$(document).ready(function() {
    positionButton();
};

ここでフィドルでそれを見てください:http//jsfiddle.net/ccq9cs9L/9/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ボタンを押してコレクションビューセルの高さを上げ、一番下までスクロールします

分類Dev

Vue.jsは同じルートのページの一番上までスクロールします

分類Dev

Jqueryのページ付けボタンをクリックすると、一番上までスクロールします

分類Dev

jQuerty:divの一番下までスクロールします(内部のコンテンツの高さ)

分類Dev

Reactのアニメーションで一番上までスクロールするボタン

分類Dev

AngularJSのdivの一番上までスクロールしますか?

分類Dev

WatchKitのWKInterfaceTableの一番上までスクロールしますか?

分類Dev

表示されていない一番上のボタンまでスクロール

分類Dev

ウィンドウの一番上までスクロールするときのJQuery非表示ボタン

分類Dev

TextViewを一番上までスクロールします

分類Dev

選択したアコーディオンボタンの一番上までスクロールします

分類Dev

JScrollPane内の一番上のJPanelまでスクロールします

分類Dev

Git bash がウィンドウの一番下まで自動スクロールし続ける

分類Dev

親を子要素の一番上までスクロールします

分類Dev

ボタンをx回クリックした後、divの一番下までスクロールするにはどうすればよいですか?

分類Dev

タブバーをタップして、UITableViewControllerの一番上までスクロールします

分類Dev

UITableViewの一番下までスクロールします

分類Dev

ckeditorの一番下までスクロールします

分類Dev

タブバーを2回押すと、UIViewControllerの一番上までスクロールします

分類Dev

タブバーを2回押すと、UIViewControllerの一番上までスクロールします

分類Dev

非表示のdivの一番下までスクロールしますか?

分類Dev

iOS 7のUITableViewの一番下までスクロールしますか?

分類Dev

LinearLayoutManagerでRecyclerViewの一番上にスクロールします。

分類Dev

ロードされた要素の後にdivの一番下までスクロールしますか?

分類Dev

ロードされた要素の後にdivの一番下までスクロールしますか?

分類Dev

divの一番下までスクロールしますか?

分類Dev

RecylcerViewは、削除されたアイテムの一番上までスクロールします

分類Dev

セクションの一番上までスクロールします(.js)

分類Dev

コンテナの一番上までスクロールしたら、要素を非表示にします

Related 関連記事

  1. 1

    ボタンを押してコレクションビューセルの高さを上げ、一番下までスクロールします

  2. 2

    Vue.jsは同じルートのページの一番上までスクロールします

  3. 3

    Jqueryのページ付けボタンをクリックすると、一番上までスクロールします

  4. 4

    jQuerty:divの一番下までスクロールします(内部のコンテンツの高さ)

  5. 5

    Reactのアニメーションで一番上までスクロールするボタン

  6. 6

    AngularJSのdivの一番上までスクロールしますか?

  7. 7

    WatchKitのWKInterfaceTableの一番上までスクロールしますか?

  8. 8

    表示されていない一番上のボタンまでスクロール

  9. 9

    ウィンドウの一番上までスクロールするときのJQuery非表示ボタン

  10. 10

    TextViewを一番上までスクロールします

  11. 11

    選択したアコーディオンボタンの一番上までスクロールします

  12. 12

    JScrollPane内の一番上のJPanelまでスクロールします

  13. 13

    Git bash がウィンドウの一番下まで自動スクロールし続ける

  14. 14

    親を子要素の一番上までスクロールします

  15. 15

    ボタンをx回クリックした後、divの一番下までスクロールするにはどうすればよいですか?

  16. 16

    タブバーをタップして、UITableViewControllerの一番上までスクロールします

  17. 17

    UITableViewの一番下までスクロールします

  18. 18

    ckeditorの一番下までスクロールします

  19. 19

    タブバーを2回押すと、UIViewControllerの一番上までスクロールします

  20. 20

    タブバーを2回押すと、UIViewControllerの一番上までスクロールします

  21. 21

    非表示のdivの一番下までスクロールしますか?

  22. 22

    iOS 7のUITableViewの一番下までスクロールしますか?

  23. 23

    LinearLayoutManagerでRecyclerViewの一番上にスクロールします。

  24. 24

    ロードされた要素の後にdivの一番下までスクロールしますか?

  25. 25

    ロードされた要素の後にdivの一番下までスクロールしますか?

  26. 26

    divの一番下までスクロールしますか?

  27. 27

    RecylcerViewは、削除されたアイテムの一番上までスクロールします

  28. 28

    セクションの一番上までスクロールします(.js)

  29. 29

    コンテナの一番上までスクロールしたら、要素を非表示にします

ホットタグ

アーカイブ