画面をスクロールしてみるのじゃ

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/themes/tab.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.scrollUp.min.js"></script>
<script>
	$(window).load(function(){
		$.scrollUp({
			scrollDistance: '50',
			scrollName: 'scrollUpBtn'
		});
	});
</script>

//オプション一覧
scrollName: 'scrollUp', // Element ID
scrollDistance: 300, // Distance from top/bottom before showing element (px)
scrollFrom: 'top', // 'top' or 'bottom'
scrollSpeed: 300, // Speed back to top (ms)
easingType: 'linear', // Scroll to top easing (see http://easings.net/)
animation: 'fade', // Fade, slide, none
animationInSpeed: 200, // Animation in speed (ms)
animationOutSpeed: 200, // Animation out speed (ms)
scrollTrigger: false, // Set a custom triggering element. Can be an HTML string or jQuery object
scrollTarget: false, // Set a custom target element for scrolling to. Can be element or number
scrollText: 'Scroll to top', // Text for element, can contain HTML
scrollTitle: false, // Set a custom <a> title if required. Defaults to scrollText
scrollImg: false, // Set true to use image
activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
zIndex: 2147483647 // Z-Index for the overlay
<p class="tac">画面をスクロールしてみるのじゃ</p>

scrollUpについて

scrollUpはページを一定量スクロールすると、ページトップへ戻るボタンを表示してくれるプラグインです。
表示するスクロール量、ボタンの表示の仕方などなかなか細かく設定できる点が◎です
ドキュメントページに記載されているオプション名と実際プラグインのオプション名が異なるものがあるので、要注意です。
たとえばtopDistanceは、実際プラグイン内ではscrollDistanceとして設定されているので、topDistanceでオプションを設定しても機能しません。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン

  • localScroll

    localScroll

    格子状に配置した要素間をダイナミックにスクロールしてくれる

  • onepageScroll

    onepageScroll

    1ページ単位でのスクロールを実装できる

  • slideToucher

    slideToucher

    上下左右方向へのスワイプ、スライドを実装できる

  • List

    List

    スクロールしても見出し部分を固定したまま表示

  • TiltedPage

    TiltedPage

    TiltedPageは、3Dで奥行き感のあるスクロールを表現できる