਀㰀栀琀洀氀 挀氀愀猀猀㴀∀渀漀ⴀ樀猀∀㸀 ਀㰀栀攀愀搀㸀 ਀ऀ㰀琀椀琀氀攀 椀琀攀洀瀀爀漀瀀㴀∀渀愀洀攀∀㸀䄀搀搀椀渀最 愀 匀挀爀漀氀氀 琀漀 吀漀瀀 䈀甀琀琀漀渀 琀漀 愀 圀攀戀猀椀琀攀 簀 圀攀戀 吀椀瀀猀㰀⼀琀椀琀氀攀㸀 ਀ऀ㰀洀攀琀愀 渀愀洀攀㴀∀愀甀琀栀漀爀∀ 挀漀渀琀攀渀琀㴀∀䨀漀攀 匀攀砀琀漀渀 㰀眀眀眀⸀樀漀猀攀瀀栀洀猀攀砀琀漀渀⸀挀漀洀㸀∀ ⼀㸀 ਀ऀ㰀洀攀琀愀 渀愀洀攀㴀∀刀伀䈀伀吀匀∀ 挀漀渀琀攀渀琀㴀∀椀渀搀攀砀Ⰰ昀漀氀氀漀眀∀ ⼀㸀 ਀ऀ㰀洀攀琀愀 渀愀洀攀㴀∀愀瀀瀀氀攀ⴀ洀漀戀椀氀攀ⴀ眀攀戀ⴀ愀瀀瀀ⴀ猀琀愀琀甀猀ⴀ戀愀爀ⴀ猀琀礀氀攀∀ 挀漀渀琀攀渀琀㴀∀戀氀愀挀欀ⴀ琀爀愀渀猀氀甀挀攀渀琀∀㸀 ਀ऀ㰀氀椀渀欀 爀攀氀㴀∀椀洀愀最攀开猀爀挀∀ 栀爀攀昀㴀∀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀眀瀀ⴀ挀漀渀琀攀渀琀⼀琀栀攀洀攀猀⼀眀攀戀琀椀瀀戀氀漀最⼀愀猀猀攀琀猀⼀椀洀最⼀眀攀戀猀椀琀攀ⴀ琀栀甀洀戀渀愀椀氀⸀瀀渀最∀ ⼀㸀 ਀ऀ㰀氀椀渀欀 爀攀氀㴀∀椀挀漀渀∀ 栀爀攀昀㴀∀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀眀瀀ⴀ挀漀渀琀攀渀琀⼀琀栀攀洀攀猀⼀眀攀戀琀椀瀀戀氀漀最⼀愀猀猀攀琀猀⼀椀洀最⼀昀愀瘀ⴀ椀挀漀渀猀⼀昀愀瘀椀挀漀渀⸀椀挀漀∀ 琀礀瀀攀㴀∀椀洀愀最攀⼀砀ⴀ椀挀漀渀∀㸀 ਀ऀ㰀氀椀渀欀 爀攀氀㴀∀愀瀀瀀氀攀ⴀ琀漀甀挀栀ⴀ椀挀漀渀ⴀ瀀爀攀挀漀洀瀀漀猀攀搀∀ 猀椀稀攀猀㴀∀㄀㄀㐀砀㄀㄀㐀∀ 栀爀攀昀㴀∀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀眀瀀ⴀ挀漀渀琀攀渀琀⼀琀栀攀洀攀猀⼀眀攀戀琀椀瀀戀氀漀最⼀愀猀猀攀琀猀⼀椀洀最⼀昀愀瘀ⴀ椀挀漀渀猀⼀愀瀀瀀氀攀ⴀ琀漀甀挀栀ⴀ椀挀漀渀ⴀ㄀㄀㐀砀㄀㄀㐀ⴀ瀀爀攀挀漀洀瀀漀猀攀搀⸀瀀渀最∀㸀 ਀ऀ㰀氀椀渀欀 爀攀氀㴀∀愀瀀瀀氀攀ⴀ琀漀甀挀栀ⴀ椀挀漀渀ⴀ瀀爀攀挀漀洀瀀漀猀攀搀∀ 栀爀攀昀㴀∀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀眀瀀ⴀ挀漀渀琀攀渀琀⼀琀栀攀洀攀猀⼀眀攀戀琀椀瀀戀氀漀最⼀愀猀猀攀琀猀⼀椀洀最⼀昀愀瘀ⴀ椀挀漀渀猀⼀愀瀀瀀氀攀ⴀ琀漀甀挀栀ⴀ椀挀漀渀ⴀ㔀㜀砀㔀㜀ⴀ瀀爀攀挀漀洀瀀漀猀攀搀⸀瀀渀最∀㸀 ਀ऀ㰀℀ⴀⴀ嬀椀昀 氀琀 䤀䔀 㤀崀㸀 ਀ऀ㰀℀嬀攀渀搀椀昀崀ⴀⴀ㸀 ਀ऀ ਀㰀洀攀琀愀 渀愀洀攀㴀∀搀攀猀挀爀椀瀀琀椀漀渀∀ 挀漀渀琀攀渀琀㴀∀䄀搀搀椀渀最 愀 猀挀爀漀氀氀 琀漀 琀漀瀀 戀甀琀琀漀渀 琀漀 礀漀甀爀 眀攀戀猀椀琀攀 挀愀渀 戀攀 愀 最爀攀愀琀 眀愀礀 琀漀 愀氀氀漀眀 礀漀甀爀 甀猀攀爀猀 琀漀 渀愀瘀椀最愀琀攀Ⰰ 攀猀瀀攀挀椀愀氀氀礀 椀昀 礀漀甀 栀愀瘀攀 氀漀渀最ⴀ猀挀爀漀氀氀椀渀最 瀀愀最攀猀⸀∀⼀㸀 ਀㰀洀攀琀愀 瀀爀漀瀀攀爀琀礀㴀∀漀最㨀氀漀挀愀氀攀∀ 挀漀渀琀攀渀琀㴀∀攀渀开唀匀∀ ⼀㸀 ਀㰀洀攀琀愀 瀀爀漀瀀攀爀琀礀㴀∀漀最㨀琀椀琀氀攀∀ 挀漀渀琀攀渀琀㴀∀䄀搀搀椀渀最 愀 匀挀爀漀氀氀 琀漀 吀漀瀀 䈀甀琀琀漀渀 琀漀 愀 圀攀戀猀椀琀攀 ⴀ 圀攀戀 吀椀瀀猀∀ ⼀㸀 ਀㰀洀攀琀愀 瀀爀漀瀀攀爀琀礀㴀∀漀最㨀甀爀氀∀ 挀漀渀琀攀渀琀㴀∀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀愀搀搀椀渀最ⴀ猀挀爀漀氀氀ⴀ琀漀瀀ⴀ戀甀琀琀漀渀ⴀ眀攀戀猀椀琀攀⼀∀ ⼀㸀 ਀㰀洀攀琀愀 瀀爀漀瀀攀爀琀礀㴀∀愀爀琀椀挀氀攀㨀琀愀最∀ 挀漀渀琀攀渀琀㴀∀䄀渀椀洀愀琀椀漀渀∀ ⼀㸀 ਀㰀洀攀琀愀 瀀爀漀瀀攀爀琀礀㴀∀愀爀琀椀挀氀攀㨀琀愀最∀ 挀漀渀琀攀渀琀㴀∀唀堀∀ ⼀㸀 ਀㰀洀攀琀愀 瀀爀漀瀀攀爀琀礀㴀∀愀爀琀椀挀氀攀㨀瀀甀戀氀椀猀栀攀搀开琀椀洀攀∀ 挀漀渀琀攀渀琀㴀∀㈀ ㄀㐀ⴀ ㈀ⴀ㈀㠀吀 㠀㨀 㔀㨀㐀 ⬀  㨀  ∀ ⼀㸀 ਀㰀洀攀琀愀 瀀爀漀瀀攀爀琀礀㴀∀漀最㨀甀瀀搀愀琀攀搀开琀椀洀攀∀ 挀漀渀琀攀渀琀㴀∀㈀ ㄀㐀ⴀ ㌀ⴀ㌀ 吀㄀㠀㨀㌀㤀㨀㔀㈀⬀  㨀  ∀ ⼀㸀 ਀㰀洀攀琀愀 瀀爀漀瀀攀爀琀礀㴀∀漀最㨀椀洀愀最攀∀ 挀漀渀琀攀渀琀㴀∀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀眀瀀ⴀ挀漀渀琀攀渀琀⼀甀瀀氀漀愀搀猀⼀㈀ ㄀㐀⼀ ㌀⼀匀挀爀漀氀氀ⴀ琀漀ⴀ琀漀瀀ⴀ戀甀琀琀漀渀⸀瀀渀最∀ ⼀㸀 ਀㰀洀攀琀愀 渀愀洀攀㴀∀琀眀椀琀琀攀爀㨀猀椀琀攀∀ 挀漀渀琀攀渀琀㴀∀䀀圀攀戀吀椀瀀䈀氀漀最∀⼀㸀 ਀㰀洀攀琀愀 渀愀洀攀㴀∀琀眀椀琀琀攀爀㨀挀爀攀愀琀漀爀∀ 挀漀渀琀攀渀琀㴀∀䀀圀攀戀吀椀瀀䈀氀漀最∀⼀㸀 ਀㰀氀椀渀欀 爀攀氀㴀✀猀琀礀氀攀猀栀攀攀琀✀ 椀搀㴀✀挀爀愀礀漀渀ⴀ琀栀攀洀攀ⴀ琀漀洀漀爀爀漀眀ⴀ渀椀最栀琀ⴀ挀猀猀✀  栀爀攀昀㴀✀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀眀瀀ⴀ挀漀渀琀攀渀琀⼀瀀氀甀最椀渀猀⼀挀爀愀礀漀渀ⴀ猀礀渀琀愀砀ⴀ栀椀最栀氀椀最栀琀攀爀⼀琀栀攀洀攀猀⼀琀漀洀漀爀爀漀眀ⴀ渀椀最栀琀⼀琀漀洀漀爀爀漀眀ⴀ渀椀最栀琀⸀挀猀猀㼀瘀攀爀㴀㈀⸀㘀⸀㄀✀ 琀礀瀀攀㴀✀琀攀砀琀⼀挀猀猀✀ 洀攀搀椀愀㴀✀愀氀氀✀ ⼀㸀 ਀㰀氀椀渀欀 爀攀氀㴀✀猀琀礀氀攀猀栀攀攀琀✀ 椀搀㴀✀昀漀渀琀ⴀ愀眀攀猀漀洀攀ⴀ挀猀猀✀  栀爀攀昀㴀✀⼀⼀渀攀琀搀渀愀⸀戀漀漀琀猀琀爀愀瀀挀搀渀⸀挀漀洀⼀昀漀渀琀ⴀ愀眀攀猀漀洀攀⼀㐀⸀㄀⸀ ⼀挀猀猀⼀昀漀渀琀ⴀ愀眀攀猀漀洀攀⸀挀猀猀✀ 琀礀瀀攀㴀✀琀攀砀琀⼀挀猀猀✀ 洀攀搀椀愀㴀✀猀挀爀攀攀渀✀ ⼀㸀 ਀㰀氀椀渀欀 爀攀氀㴀✀猀琀礀氀攀猀栀攀攀琀✀ 椀搀㴀✀漀瀀攀渀ⴀ猀愀渀猀ⴀ挀猀猀✀  栀爀攀昀㴀✀⼀⼀昀漀渀琀猀⸀最漀漀最氀攀愀瀀椀猀⸀挀漀洀⼀挀猀猀㼀昀愀洀椀氀礀㴀伀瀀攀渀⬀匀愀渀猀─㌀䄀㌀  椀琀愀氀椀挀─㈀䌀㐀  椀琀愀氀椀挀─㈀䌀㘀  椀琀愀氀椀挀─㈀䌀㌀  ─㈀䌀㐀  ─㈀䌀㘀  ☀⌀ ㌀㠀㬀猀甀戀猀攀琀㴀氀愀琀椀渀─㈀䌀氀愀琀椀渀ⴀ攀砀琀☀⌀ ㌀㠀㬀瘀攀爀㴀㌀⸀㤀⸀㄀✀ 琀礀瀀攀㴀✀琀攀砀琀⼀挀猀猀✀ 洀攀搀椀愀㴀✀愀氀氀✀ ⼀㸀 ਀㰀氀椀渀欀 爀攀氀㴀✀猀琀礀氀攀猀栀攀攀琀✀ 椀搀㴀✀洀愀椀渀ⴀ猀琀礀氀攀ⴀ挀猀猀✀  栀爀攀昀㴀✀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀眀瀀ⴀ挀漀渀琀攀渀琀⼀琀栀攀洀攀猀⼀眀攀戀琀椀瀀戀氀漀最⼀愀猀猀攀琀猀⼀挀猀猀⼀洀愀椀渀⸀挀猀猀㼀瘀攀爀㴀愀氀瀀栀愀✀ 琀礀瀀攀㴀✀琀攀砀琀⼀挀猀猀✀ 洀攀搀椀愀㴀✀愀氀氀✀ ⼀㸀 ਀㰀猀挀爀椀瀀琀 琀礀瀀攀㴀✀琀攀砀琀⼀樀愀瘀愀猀挀爀椀瀀琀✀㸀 /* ਀㰀猀挀爀椀瀀琀 琀礀瀀攀㴀✀琀攀砀琀⼀樀愀瘀愀猀挀爀椀瀀琀✀ 猀爀挀㴀✀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀眀瀀ⴀ挀漀渀琀攀渀琀⼀瀀氀甀最椀渀猀⼀挀爀愀礀漀渀ⴀ猀礀渀琀愀砀ⴀ栀椀最栀氀椀最栀琀攀爀⼀樀猀⼀洀椀渀⼀挀爀愀礀漀渀⸀洀椀渀⸀樀猀㼀瘀攀爀㴀㈀⸀㘀⸀㄀✀㸀㰀⼀猀挀爀椀瀀琀㸀 ਀㰀氀椀渀欀 爀攀氀㴀✀猀栀漀爀琀氀椀渀欀✀ 栀爀攀昀㴀✀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀㼀瀀㴀㐀㘀㐀✀ ⼀㸀 ਀㰀猀琀礀氀攀㸀 .scroll-back-to-top-wrapper {਀    瀀漀猀椀琀椀漀渀㨀 昀椀砀攀搀㬀 opacity: 0;਀ऀ瘀椀猀椀戀椀氀椀琀礀㨀 栀椀搀搀攀渀㬀 overflow: hidden;਀ऀ琀攀砀琀ⴀ愀氀椀最渀㨀 挀攀渀琀攀爀㬀 z-index: 99999999;਀    戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 ⌀㜀㜀㜀㜀㜀㜀㬀 color: #eeeeee;਀ऀ眀椀搀琀栀㨀 㔀 瀀砀㬀 height: 48px;਀ऀ氀椀渀攀ⴀ栀攀椀最栀琀㨀 㐀㠀瀀砀㬀 right: 30px;਀ऀ戀漀琀琀漀洀㨀 ㌀ 瀀砀㬀 padding-top: 2px;਀ऀ戀漀爀搀攀爀ⴀ琀漀瀀ⴀ氀攀昀琀ⴀ爀愀搀椀甀猀㨀 ㄀ 瀀砀㬀 border-top-right-radius: 10px;਀ऀ戀漀爀搀攀爀ⴀ戀漀琀琀漀洀ⴀ爀椀最栀琀ⴀ爀愀搀椀甀猀㨀 ㄀ 瀀砀㬀 border-bottom-left-radius: 10px;਀ऀⴀ眀攀戀欀椀琀ⴀ琀爀愀渀猀椀琀椀漀渀㨀 愀氀氀  ⸀㔀猀 攀愀猀攀ⴀ椀渀ⴀ漀甀琀㬀 -moz-transition: all 0.5s ease-in-out;਀ऀⴀ洀猀ⴀ琀爀愀渀猀椀琀椀漀渀㨀 愀氀氀  ⸀㔀猀 攀愀猀攀ⴀ椀渀ⴀ漀甀琀㬀 -o-transition: all 0.5s ease-in-out;਀ऀ琀爀愀渀猀椀琀椀漀渀㨀 愀氀氀  ⸀㔀猀 攀愀猀攀ⴀ椀渀ⴀ漀甀琀㬀 }਀⸀猀挀爀漀氀氀ⴀ戀愀挀欀ⴀ琀漀ⴀ琀漀瀀ⴀ眀爀愀瀀瀀攀爀㨀栀漀瘀攀爀 笀 background-color: #888888;਀  挀漀氀漀爀㨀 ⌀攀攀攀攀攀攀㬀 }਀⸀猀挀爀漀氀氀ⴀ戀愀挀欀ⴀ琀漀ⴀ琀漀瀀ⴀ眀爀愀瀀瀀攀爀⸀猀栀漀眀 笀 visibility:visible;਀    挀甀爀猀漀爀㨀瀀漀椀渀琀攀爀㬀 opacity: 1.0;਀紀 .scroll-back-to-top-wrapper i.fa {਀ऀ氀椀渀攀ⴀ栀攀椀最栀琀㨀 椀渀栀攀爀椀琀㬀 }਀⸀猀挀爀漀氀氀ⴀ戀愀挀欀ⴀ琀漀ⴀ琀漀瀀ⴀ眀爀愀瀀瀀攀爀 ⸀昀愀ⴀ氀最 笀 vertical-align: 0;਀紀 ਀㰀戀漀搀礀㸀
਀ऀ㰀℀ⴀⴀ嬀椀昀 氀琀 䤀䔀 㜀崀㸀

You are using an outdated browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.

਀ऀ㰀℀嬀攀渀搀椀昀崀ⴀⴀ㸀 ਀ऀ㰀栀攀愀搀攀爀 挀氀愀猀猀㴀∀猀椀琀攀ⴀ栀攀愀搀攀爀∀㸀

਀ऀऀऀ㰀愀 栀爀攀昀㴀∀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀∀ 琀椀琀氀攀㴀∀圀攀戀 吀椀瀀猀∀㸀圀攀戀 吀椀瀀猀㰀⼀愀㸀

਀ऀऀ㰀搀椀瘀 挀氀愀猀猀㴀∀栀攀愀搀攀爀ⴀ搀攀猀挀爀椀瀀琀椀漀渀∀㸀 A blog for web developers
਀ऀऀ㰀⼀搀椀瘀㸀 ਀ऀऀ㰀渀愀瘀 挀氀愀猀猀㴀∀渀愀瘀戀愀爀 渀愀瘀戀愀爀ⴀ猀琀愀琀椀挀ⴀ琀漀瀀∀ 爀漀氀攀㴀∀渀愀瘀椀最愀琀椀漀渀∀㸀
਀ऀऀ㰀搀椀瘀 挀氀愀猀猀㴀∀渀愀瘀戀愀爀ⴀ栀攀愀搀攀爀∀㸀 ਀ऀऀऀ㰀搀椀瘀 挀氀愀猀猀㴀∀渀愀瘀戀愀爀ⴀ戀爀愀渀搀 猀栀漀眀ⴀ猀攀愀爀挀栀ⴀ昀漀爀洀 洀漀戀椀氀攀ⴀ猀栀漀眀ⴀ猀攀愀爀挀栀∀ 栀爀攀昀㴀∀⌀∀㸀㰀猀瀀愀渀 挀氀愀猀猀㴀∀最氀礀瀀栀椀挀漀渀 最氀礀瀀栀椀挀漀渀ⴀ猀攀愀爀挀栀∀㸀㰀⼀猀瀀愀渀㸀㰀⼀搀椀瘀㸀
਀ऀऀ㰀搀椀瘀 挀氀愀猀猀㴀∀挀漀氀氀愀瀀猀攀 渀愀瘀戀愀爀ⴀ挀漀氀氀愀瀀猀攀 渀愀瘀戀愀爀ⴀ攀砀㄀ⴀ挀漀氀氀愀瀀猀攀∀㸀 ਀ऀऀ㰀⼀搀椀瘀㸀
਀㰀⼀渀愀瘀㸀
਀ऀऀऀ㰀昀漀爀洀 爀漀氀攀㴀∀猀攀愀爀挀栀∀ 洀攀琀栀漀搀㴀∀最攀琀∀ 挀氀愀猀猀㴀∀猀攀愀爀挀栀ⴀ昀漀爀洀∀ 愀挀琀椀漀渀㴀∀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀∀㸀
਀ऀऀ㰀戀甀琀琀漀渀 琀礀瀀攀㴀∀猀甀戀洀椀琀∀ 椀搀㴀∀猀攀愀爀挀栀猀甀戀洀椀琀∀ 瘀愀氀甀攀㴀∀匀攀愀爀挀栀∀㸀 ਀ऀऀ㰀⼀戀甀琀琀漀渀㸀 ਀ऀ㰀⼀搀椀瘀㸀
਀ऀ㰀⼀栀攀愀搀攀爀㸀 ਀ऀऀऀऀ㰀猀挀爀椀瀀琀 愀猀礀渀挀 猀爀挀㴀∀栀琀琀瀀㨀⼀⼀瀀愀最攀愀搀㈀⸀最漀漀最氀攀猀礀渀搀椀挀愀琀椀漀渀⸀挀漀洀⼀瀀愀最攀愀搀⼀樀猀⼀愀搀猀戀礀最漀漀最氀攀⸀樀猀∀㸀㰀⼀猀挀爀椀瀀琀㸀 ਀ऀ⠀愀搀猀戀礀最漀漀最氀攀 㴀 眀椀渀搀漀眀⸀愀搀猀戀礀最漀漀最氀攀 簀簀 嬀崀⤀⸀瀀甀猀栀⠀笀紀⤀㬀 ਀ऀ ਀㰀搀椀瘀 椀搀㴀∀挀漀渀琀攀渀琀∀ 挀氀愀猀猀㴀∀猀椀琀攀ⴀ挀漀渀琀攀渀琀 昀愀搀攀ⴀ椀渀∀ 爀漀氀攀㴀∀洀愀椀渀∀㸀 ਀ऀ
਀ऀ㰀栀攀愀搀攀爀 挀氀愀猀猀㴀∀愀爀琀椀挀氀攀ⴀ栀攀愀搀攀爀∀㸀 ਀ऀऀऀऀऀ㰀栀攀愀搀攀爀 挀氀愀猀猀㴀∀瀀愀最攀ⴀ栀攀愀搀攀爀∀㸀

Adding a Scroll to Top Button to a Website

਀ऀऀऀ㰀⼀栀攀愀搀攀爀㸀 ਀ऀऀ㰀搀椀瘀 挀氀愀猀猀㴀∀愀爀琀椀挀氀攀ⴀ洀攀琀愀∀㸀 ਀ऀऀऀ ਀ऀऀऀऀऀ㰀猀瀀愀渀 挀氀愀猀猀㴀∀最氀礀瀀栀椀挀漀渀 最氀礀瀀栀椀挀漀渀ⴀ昀漀氀搀攀爀ⴀ漀瀀攀渀∀㸀㰀⼀猀瀀愀渀㸀 Javascript ਀ऀऀऀ ਀ऀऀऀ ਀ऀऀऀऀऀऀऀ㰀搀椀瘀 挀氀愀猀猀㴀∀猀漀挀椀愀氀ⴀ挀漀渀琀愀椀渀攀爀∀㸀
਀ऀ㰀搀椀瘀 椀搀㴀∀昀戀ⴀ爀漀漀琀∀㸀㰀⼀搀椀瘀㸀 ਀ऀ㰀猀挀爀椀瀀琀㸀℀昀甀渀挀琀椀漀渀⠀搀Ⰰ猀Ⰰ椀搀⤀笀瘀愀爀 樀猀Ⰰ昀樀猀㴀搀⸀最攀琀䔀氀攀洀攀渀琀猀䈀礀吀愀最一愀洀攀⠀猀⤀嬀 崀Ⰰ瀀㴀⼀帀栀琀琀瀀㨀⼀⸀琀攀猀琀⠀搀⸀氀漀挀愀琀椀漀渀⤀㼀✀栀琀琀瀀✀㨀✀栀琀琀瀀猀✀㬀椀昀⠀℀搀⸀最攀琀䔀氀攀洀攀渀琀䈀礀䤀搀⠀椀搀⤀⤀笀樀猀㴀搀⸀挀爀攀愀琀攀䔀氀攀洀攀渀琀⠀猀⤀㬀樀猀⸀椀搀㴀椀搀㬀樀猀⸀猀爀挀㴀瀀⬀✀㨀⼀⼀瀀氀愀琀昀漀爀洀⸀琀眀椀琀琀攀爀⸀挀漀洀⼀眀椀搀最攀琀猀⸀樀猀✀㬀昀樀猀⸀瀀愀爀攀渀琀一漀搀攀⸀椀渀猀攀爀琀䈀攀昀漀爀攀⠀樀猀Ⰰ昀樀猀⤀㬀紀紀⠀搀漀挀甀洀攀渀琀Ⰰ ✀猀挀爀椀瀀琀✀Ⰰ ✀琀眀椀琀琀攀爀ⴀ眀樀猀✀⤀㬀㰀⼀猀挀爀椀瀀琀㸀 ਀ऀ㰀搀椀瘀 挀氀愀猀猀㴀∀最ⴀ瀀氀甀猀漀渀攀∀ 搀愀琀愀ⴀ猀椀稀攀㴀∀洀攀搀椀甀洀∀㸀㰀⼀搀椀瘀㸀 ਀㰀⼀搀椀瘀㸀ऀऀऀऀऀ㰀⼀搀椀瘀㸀 ਀
਀ऀऀऀऀ㰀椀洀最 眀椀搀琀栀㴀∀㄀㐀㘀∀ 栀攀椀最栀琀㴀∀㄀㐀 ∀ 猀爀挀㴀∀栀琀琀瀀㨀⼀⼀眀眀眀⸀眀攀戀琀椀瀀戀氀漀最⸀挀漀洀⼀眀瀀ⴀ挀漀渀琀攀渀琀⼀甀瀀氀漀愀搀猀⼀㈀ ㄀㐀⼀ ㌀⼀匀挀爀漀氀氀ⴀ琀漀ⴀ琀漀瀀ⴀ戀甀琀琀漀渀⸀瀀渀最∀ 挀氀愀猀猀㴀∀愀琀琀愀挀栀洀攀渀琀ⴀ瀀漀猀琀ⴀ琀栀甀洀戀渀愀椀氀 眀瀀ⴀ瀀漀猀琀ⴀ椀洀愀最攀∀ 愀氀琀㴀∀匀挀爀漀氀氀ⴀ琀漀ⴀ琀漀瀀ⴀ戀甀琀琀漀渀∀ ⼀㸀ऀऀऀ㰀⼀搀椀瘀㸀 ਀ऀ㰀⼀栀攀愀搀攀爀㸀 ਀ऀऀऀ㰀搀椀瘀 挀氀愀猀猀㴀∀愀爀琀椀挀氀攀ⴀ挀漀渀琀攀渀琀∀㸀

Adding a scroll to top button to your website can be a great way to allow your users to navigate, especially if you have long-scrolling pages. A scroll button should be subtle and it has become expected to see one on the lower right of the page. Some sites include the button in the footer while others use fixed positioning to place the button and show/hide the button based on where the user is on the page. This tutorial will cover how to display the scroll button using jQuery when the user scrolls down the page a little. We’ll use an icon font from Font Awesome but you could easily substitute a Bootstrap glyph or any other icon.਀㰀⼀瀀㸀

 
਀☀渀戀猀瀀㬀㰀⼀瀀㸀

Style and Script Libraries

਀㰀瀀㸀 We need to make sure two libraries are present on our page. The first is jQuery, as we’ll be using that to hide/show the button and to scroll the page when the user clicks the button.

਀㰀瀀㸀䤀昀 樀儀甀攀爀礀 椀猀 渀漀琀 愀氀爀攀愀搀礀 椀渀 甀猀攀 漀渀 礀漀甀爀 猀椀琀攀Ⰰ 愀搀搀 琀栀攀 昀漀氀氀漀眀椀渀最 樀甀猀琀 戀攀昀漀爀攀 琀栀攀 挀氀漀猀椀渀最 㰀攀洀㸀☀氀琀㬀戀漀搀礀☀最琀㬀㰀⼀攀洀㸀 琀愀最 漀昀 琀栀攀 瀀愀最攀⸀㰀⼀瀀㸀㰀℀ⴀⴀ 䌀爀愀礀漀渀 匀礀渀琀愀砀 䠀椀最栀氀椀最栀琀攀爀 瘀㈀⸀㘀⸀㄀ ⴀⴀ㸀 ਀ऀऀ㰀搀椀瘀 椀搀㴀∀挀爀愀礀漀渀ⴀ㔀㌀㤀㐀㤀愀㈀㜀㜀戀㔀㜀搀㘀㤀㌀㤀㜀㈀㠀㄀㐀∀ 挀氀愀猀猀㴀∀挀爀愀礀漀渀ⴀ猀礀渀琀愀砀 挀爀愀礀漀渀ⴀ琀栀攀洀攀ⴀ琀漀洀漀爀爀漀眀ⴀ渀椀最栀琀 挀爀愀礀漀渀ⴀ昀漀渀琀ⴀ洀漀渀愀挀漀 挀爀愀礀漀渀ⴀ漀猀ⴀ瀀挀 瀀爀椀渀琀ⴀ礀攀猀 渀漀琀爀愀渀猀氀愀琀攀∀ 搀愀琀愀ⴀ猀攀琀琀椀渀最猀㴀∀ 渀漀ⴀ瀀漀瀀甀瀀 洀椀渀椀洀椀稀攀 猀挀爀漀氀氀ⴀ洀漀甀猀攀漀瘀攀爀∀ 猀琀礀氀攀㴀∀ 洀愀爀最椀渀ⴀ琀漀瀀㨀 ㄀㈀瀀砀㬀 洀愀爀最椀渀ⴀ戀漀琀琀漀洀㨀 ㄀㈀瀀砀㬀 昀氀漀愀琀㨀 渀漀渀攀㬀 挀氀攀愀爀㨀 戀漀琀栀㬀 昀漀渀琀ⴀ猀椀稀攀㨀 ㄀㈀瀀砀 ℀椀洀瀀漀爀琀愀渀琀㬀 氀椀渀攀ⴀ栀攀椀最栀琀㨀 ㄀㔀瀀砀 ℀椀洀瀀漀爀琀愀渀琀㬀∀㸀 ਀ऀऀऀ㰀搀椀瘀 挀氀愀猀猀㴀∀挀爀愀礀漀渀ⴀ瀀氀愀椀渀ⴀ眀爀愀瀀∀㸀㰀⼀搀椀瘀㸀
਀ऀऀऀऀ㰀琀愀戀氀攀 挀氀愀猀猀㴀∀挀爀愀礀漀渀ⴀ琀愀戀氀攀∀㸀 ਀ऀऀऀऀ㰀琀搀 挀氀愀猀猀㴀∀挀爀愀礀漀渀ⴀ渀甀洀猀 ∀ 搀愀琀愀ⴀ猀攀琀琀椀渀最猀㴀∀栀椀搀攀∀㸀
1
2
3
4
5
6
਀ऀऀऀऀ㰀⼀琀搀㸀
<!-- ... -->
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 
</body>
</html>
਀ऀऀऀऀऀ㰀⼀琀爀㸀 ਀ऀऀऀ㰀⼀搀椀瘀㸀
਀㰀℀ⴀⴀ 嬀䘀漀爀洀愀琀 吀椀洀攀㨀  ⸀  ㈀㤀 猀攀挀漀渀搀猀崀 ⴀⴀ㸀

The next step is to add the icon font library. If you’re not already using Font Awesome, then include the following to the <head> element of your page.

਀㰀℀ⴀⴀ 嬀䘀漀爀洀愀琀 吀椀洀攀㨀  ⸀   㜀 猀攀挀漀渀搀猀崀 ⴀⴀ㸀

਀㰀⼀瀀㸀

 
਀☀渀戀猀瀀㬀㰀⼀瀀㸀

CSS Styles

਀㰀瀀㸀 The CSS for the button is pretty straight forward as well. The colors, sizes, and other properties can be changed, but the important styles are the position, visibility, and opacity properties. Add the following to the <head> element.