[jQuery]自動回捲按鈕

很多的網頁都習慣在右下角做一個可以回捲到最上方的按鈕，這個功能的其實原理很簡單，只要善用scroll系列的函式即可達到效果

HTML

CSS

.return-btn {
    width:40px;
    height:40px;
    background:#000;
    border-radius:20px;
    font-size:25px;
    text-align:center;
    position:fixed;
    right:30px;
    bottom:30px;
    padding-top:5px;
    padding-right:1px;
}

.return-btn a {
    color:#FFF;
    display:block;
}

jQuery

(function() {      ('.return-btn').hide();
    (window).scroll(function() {          if ((this).scrollTop()) {
			//當scrollTop不等於0(不在最上方，顯示button)
            ('.return-btn').stop(true, true).fadeIn();          } else {  			//當scrollTop等於0(在最上方，隱藏button)              ('.return-btn').stop(true, true).fadeOut();
        }
    });

    ('.return-btn').click(function(e) {          e.preventDefault();  		//移回最上方          ('html, body').animate({scrollTop:0}, 500);
    });
});

分類

• Android
• AngularJS
• API Blueprint
• Chrome
• Database
  • MySQL
• DataStructure
• Editor
  • Vim
• Firefox
• Git
• Hadoop
• Language
  • Go
  • Java
  • JavaScript
    • jQuery
      • jQueryChart
    • Node.js
    • Vue
  • PHP
    • Laravel
    • ZendFramework
  • Python
• Mac
• Network
  • Cisco
  • DLink
  • Juniper
• Oauth
• Server
  • Apache
• Share
• Unix
  • FreeBSD
  • Linux
• WebDesign
  • Bootstrap
  • CSS
  • HTML
  • Wordpress

Search