Smooth Page Scroll to Top
27 มี.ค. 2016 , 3,179 Views , หมวดหมู่ jQuery,JavaScript,Ajax WebDesign ทุกหมวดหมู่ โค๊ดดิ้ง , ป้ายกำกับ:Scroll to Top
ตัวอย่างโค๊ดสำหรับ คลิกเพื่อเลื่อนเพจขึ้นไปด้านบนสุด โดยใช้ jQuery
ตัวอย่างโค๊ด
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Test</title> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ <!--Smooth Page Scroll to Top--> $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); <!--//--> }); </script> <style> .scrollup { width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url(img/icon_top.png) no-repeat; } </style> </head> <body> <div style="height:1000px;"> Content </div> <a href="#" class="scrollup">Scroll</a> </body> </html> |
คลิกดาวน์โหลดไฟล์ภาพเพื่อนำไปใช้
ตัวอย่างการแสดงผล
See the Pen Smooth Page Scroll to Top by Suttipong Choysakda (@nathanbc46) on CodePen.
Related Posts
ป้ายกำกับ:Scroll to Top
