For Android device For iOS device
៣១
តុលា

របៀបធ្វើ Scroll To Top ជាមួយនឹង jQuery

​ថ្ងៃ​នេះអានយើង​ខ្ញុំ​សូមលើកយកពីរបៀបធ្វើ Scroll To Top ​ជាមួយនឹង jQuery មក​បង្ហាញ​ជូន​លោកអ្នក ។ ការ​ប្រើ​ប្រាស់ Scroll To Top មាន​សារៈ​ប្រយោជន៍​នៅលើ​ Web page ​របស់អ្នក នៅពេល​ដែល​អ្នក scroll page ចុះក្រោម នោះ​វានឹង​បង្ហាញ​ Button ​សម្រាប់​ឲ្យ​អ្នកចុចលើវា ដើម្បី​ឡើង​ទៅលើ​វិញ ដូច្នេះអ្នកមិនចាំបាច់​ Scroll ឡើង​ទៅលើ​នោះទេ ។

សូមចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ប្រចាំ​ថ្ងៃ​

សូមមើលរូប​ខាងក្រោម​៖

​នៅពេល​ដែល​អ្នកចុចលើប៊ូតុង ដែល​បាន​បង្ហាញ​មក​វានឹង​រត់ទៅ​ខាងលើ​វិញ ដូចរូប៖

របៀបធ្វើ

- ទី១ បង្កើត file មួយដោយដាក់​ឈ្មោះ​ថា scroll_top.html បន្ទាប់មក​សរសេរ​កូដ​ខាងក្រោម​បញ្ចូល ទៅ​ក្នុង file ​របស់អ្នក​ 

នៅបន្ទាត់ទី៨ <h3 class="scrollToTop"><img src="arrow_top.png"></h3> គឺជាការដាក់​រូបភាព វា​ត្រូវបាន​ហៅទៅ​ប្រើ​នៅ​ផ្នែក script

- ទី២ សរសេរ​កូដ jQuery ​ខាងក្រោម​បញ្ចូល នៅ​ខាងក្រោម <head> tag 

· នៅបន្ទាត់ទី​៦ គឺជាការហៅ library របស់ jQuery មក​ប្រើ​ប្រាស់ នៅទីនេះ​ខ្ញុំ​មិនបាន download វាមក​ប្រើ​នោះ គឺ​ខ្ញុំ​ហៅវាមក​ប្រើ​តាមរយៈ online 

· នៅបន្ទាត់ទី៨ ដល់ទី១៣ គឺជាកូដរបស់ CSS ​ដែល​ដាក់ style ទៅ​ឲ្យ​ប៊ូតុង រូបភាព scroll_top.png ​ឲ្យ​វា​បង្ហាញ​នៅ​ផ្នែក​ខាងក្រោម និងខាង​ស្ដាំ​នៃ web page

· នៅបន្ទាត់ទី១៩ $ (window) .scroll (function () {} គឺជាការ​ប្រើ​ប្រាស់ event scroll

· នៅបន្ទាត់ទី២០ ដល់បន្ទាត់ទី២៤ គឺជាការ​សិក្សា​លក្ខខណ្ឌ ប្រសិនបើ អ្នក Scroll ចុះក្រោមចំនួន 12px (if ($ (this) .scrollTop () > 120) {} ) ​វានឹង​បង្ហាញ​ប៊ូតុង ជា​រូបភាព​មក ($ ('.scrollToTop') .fadeIn () ;) ។ ហើយ​ប្រសិនបើ​អ្នកចុចលើ ប៊ូតុងជា​រូបភាព​នោះ វានឹង​លឹបបាត់ប៊ូតុង នោះទៅវិញ ($ ('.scrollToTop') .fadeOut () ;) ។

· នៅបន្ទាត់ទី២៨ ដល់បន្ទាត់ទី៣១ គឺជា function ​សម្រាប់​ឲ្យ​វារត់ដល់​ផ្នែក​ខាងលើ​បង្អស់របស់ web page វិញ ។

*** រៀបរៀងអត្ថបទដោយ៖ លោក សំ រិទ្ឋី

*** ត្រួត​ពិនិត្យ និងកែ​សម្រួល​អត្ថបទដោយ៖ លោក ហេង ពេងលាប

*** មុខវិជ្ផា HTML+HTML5+Dreamweaver តម្លៃ ៥៥ដុល្លា ឬ ២២០០០០រៀល សម្រាប់ Course Outline នៃ​វគ្គ​ http://training.antkh.com/html.aspx

*** មុខវិជ្ផា Web Design with CSS + Bootstrap តម្លៃ ៨០ដុល្លា ឬ ៣២០០០០រៀល សម្រាប់ Course Outline នៃ​វគ្គ​នេះ http://training.antkh.com/website_design_with_css.aspx

*** សម្រាប់​ស្នាដៃសិស្ស​ដែល​បាន​បញ្ចប់​វគ្គ​គេហទំព័រជា​ច្រើន នៅអាន-ANT http://training.antkh.com/achievements/?c=web

*** សូម​ចូលរួម​ជាសមាជិក ANT Training Group ដើម្បី​តាមដានសម្មភាពប្រចាំ​ថ្ងៃ​ជាមួយអាន-ANT
*** ចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ដែល​ទាក់ទងនឹង​បច្ចេកវិទ្យា​រៀងរាល់​ថ្ងៃ​

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា