பக்கம் மேல் விசைக்குச் செல்லவும். jQuery ஐப் பயன்படுத்தி "மேலே திரும்பவும்" அல்லது ஸ்க்ரோல் டு டாப் பொத்தானை உருவாக்கவும்

| 09.10.2014

பல நீண்ட பக்கங்கள் உள்ள தளங்களில் "பேக் டு டாப்" பொத்தான் அடிக்கடி பயன்படுத்தப்படுகிறது. ஒரு பயனர், ஒரு பெரிய கட்டுரை, படத்தொகுப்பு, செய்திகளைப் பார்க்கும்போது சமூக வலைப்பின்னல்கள்முதலியன, பக்கத்தின் மேற்பகுதிக்கு மீண்டும் செல்ல விரும்புகிறார், அவர் நீண்ட நேரம் உருட்டுகிறார் (இது மிகவும் வசதியானது அல்ல), அல்லது விசைப்பலகையில் முகப்பு விசையை அழுத்துகிறது அல்லது சிறப்பு "மேலே" பொத்தானைப் பயன்படுத்துகிறது.

இந்த பொத்தானின் நன்மை என்னவென்றால், இது டேப்லெட்டுகள் மற்றும் ஸ்மார்ட்போன்களில் வேலை செய்ய முடியும், மேலும் உங்களிடம் விசைப்பலகை இல்லாத பிற சந்தர்ப்பங்களில் இது வேலை செய்யும். கூடுதலாக, எல்லா பயனர்களுக்கும் இது பற்றி தெரியாது பயனுள்ள செயல்பாடுமுகப்பு விசைகள் மற்றும் தளத்தில் உள்ள பொத்தான் எப்போதும் தெரியும், அது எதற்காக என்பதை நீங்கள் உடனடியாக பார்க்கலாம். இரண்டாவது பிளஸ் என்னவென்றால், இந்த பொத்தானை மேம்படுத்தி உருவாக்க முடியும், இதனால் பயனர் அவர் மேலே வந்த பக்கத்தில் உள்ள இடத்திற்குத் திரும்புகிறார். பொத்தானின் இந்தப் பதிப்பைத்தான் இன்று நாம் உருவாக்கப் போகிறோம். நீங்கள் டெமோவைப் பார்க்கலாம் மற்றும் உதாரணக் கோப்பை உங்கள் கணினியில் பதிவிறக்கம் செய்யலாம்.

பொத்தான் ஸ்டைலிங்கைக் கையாளும் CSS இன் பகுதி இதுபோல் தெரிகிறது:

இன்டாப் (நிலை: நிலையானது; இடது: 0px; மேல்: 0px; அகலம்: 20%; உயரம்: 100%; ஒளிபுகாநிலை: 0.5; வடிகட்டி: ஆல்பா (ஒளிபுகாநிலை=50); கர்சர்: சுட்டிக்காட்டி; காட்சி: எதுவுமில்லை; ) .inTop: மிதவை (பின்னணி-நிறம்: #f5f4f4; ஒளிபுகாநிலை: 1; வடிகட்டி: ஆல்பா(ஒளிபுகாநிலை=100); .inTop span (காட்சி: தொகுதி; அகலம்: 100%; விளிம்பு-மேல்: 20px; உரை-சீரமைப்பு: மையம்; எழுத்துரு அளவு : 110%; எழுத்துரு குடும்பம்: ஜார்ஜியா, எழுத்துரு எடை: தடிமனான

அடுத்த படி ஜாவாஸ்கிரிப்ட் குறியீடு. வசதிக்காக, விளக்கங்களுடன் கருத்துகள் உள்ளே சேர்க்கப்பட்டுள்ளன:

// மாறிகளின் அறிவிப்பு: var BottomPosition = 0; // பக்க நிலை var BottomFlag = தவறானது; // GO TO BOTTOM பொத்தான் var AnimateFlag = false பொத்தான் மேலே செல்லவும்/கீழே செல்லவும் ":BottomPosition), 200, செயல்பாடு() ( // ...200 AnimateFlag = தவறான வேகத்தில் பக்கத்தில் விரும்பிய இடத்திற்குத் திரும்புகிறது; // அனிமேஷன் முடிந்தது )); // பொத்தானை மாற்றவும் $(" .inTop span").html ("TOP TOP"); ) வேறு ( // GO TO TOP பட்டனை அழுத்தினால்... $("body,html").animate(("scrollTop":0), 200, செயல்பாடு() ( // ..200 அனிமேட் ஃபிளாக் = தப்பு ) ) பக்கத்தை உருட்டுதல்: $(window).சுருள்(செயல்பாடு(நிகழ்வு) (var countScroll = $(window).scrollTop ();

));

படி 3. HTML

HTML இல் ஒரு பொத்தானை உருவாக்கினால் போதும்:

மேலே செல்க

அவ்வளவுதான், திரும்பும் செயல்பாட்டைக் கொண்ட தளத்திற்கான எளிய ஆனால் மிகவும் வசதியான Back to top பொத்தான் தயாராக உள்ளது. அதன் பாணியை நீங்களே தனிப்பயனாக்கலாம், இது உங்கள் தளத்திற்கு பொருந்தும். நீங்கள் ஆக்கப்பூர்வமான வெற்றியையும் திருப்தியான பயனர்களையும் விரும்புகிறோம்!நிறைய உள்ளடக்கம் உள்ள தளங்களில் (உதாரணமாக, வலைப்பதிவுகள்) நீங்கள் "மேலே திரும்பு" பொத்தானைப் பயன்படுத்த வேண்டும். எல்லாவற்றிற்கும் மேலாக, ஒரு நீண்ட கட்டுரையைப் படித்த பயனர் திரும்ப வேண்டும்

எனவே, தள வழிசெலுத்தலை எளிதாக்க, பக்க உருள் பொத்தான் பயன்படுத்தப்படுகிறது. ஜாவாஸ்கிரிப்டைப் பயன்படுத்தாமலேயே நீங்கள் அத்தகைய பொத்தானை உருவாக்க முடியும் (இதன் மூலம் மட்டும் CSS ஐப் பயன்படுத்துகிறது), மற்றும் அவருடன். இந்த முறைகளின் எளிய செயலாக்கங்களைப் பார்ப்போம்.

நன்மை இந்த முறை- பயன்பாட்டின் எளிமை (கூடுதல் நூலகங்கள் அல்லது ஸ்கிரிப்ட்களைப் பயன்படுத்த வேண்டிய அவசியமில்லை).

CSS உடன் மேல் பட்டன் - "Nubex" .topNubex (நிலை: நிலையானது; வலது: 45px; கீழே: 45px; ) மேல்

இந்த முறையின் தீமைகள் என்னவென்றால், இந்த வழக்கில் ஸ்க்ரோலிங் சீராக இருக்க முடியாது, மேலும் பார்வையாளர் உடனடியாக பக்கத்தின் மேல் பகுதிக்கு திருப்பி விடப்படுவார்.

கீழே உள்ள முறை JQuery நூலகத்தைப் பயன்படுத்துகிறது. இது பயன்படுத்த எளிதானது மற்றும் பக்கத்தை சீராக உருட்ட அனுமதிக்கிறது.

ஜாவாஸ்கிரிப்டைப் பயன்படுத்தும் மேல் பட்டன் - "Nubex" #topNubex (நிலை: நிலையானது; வலது: 45px; கீழே: 45px; ) $(function() ( $(window).scroll(function() ( if($(this) .scrollTop( ) != 0) ($("#topNubex").fadeIn(); ) else ($("#topNubex").fadeOut(); ) )).click( function() ( $("உடல்,html").அனிமேட்((ஸ்க்ரோல்டாப்:0),700); ));

இந்த எடுத்துக்காட்டு பொத்தான் பின்னணியாக ஒரு படத்தைப் பயன்படுத்துகிறது. CSS பாணிகளைப் பயன்படுத்தி பொத்தானின் காட்சியைத் தனிப்பயனாக்கலாம் (அளவு, நிறம், அவுட்லைன், வெளிப்படைத்தன்மை போன்றவை). எனவே, இந்த முறை மிகவும் நெகிழ்வானது மற்றும் உங்கள் தளத்தில் "பேக் டு டாப்" பொத்தானைச் சேர்க்கும்போது கூடுதல் விருப்பங்களை வழங்குகிறது.

"பேக் டு டாப்" பொத்தான் என்பது உங்களில் பலர் பல இணையதளங்களில் பார்த்திருக்கலாம். நீங்கள் உருட்டும் போது வலைப்பக்கத்தின் கீழ் வலது மூலையில் தோன்றும் அம்புக்குறி இது. நீங்கள் கிளிக் செய்யும் போது, ​​​​அது உங்களை மீண்டும் பக்கத்தின் மேல் பகுதிக்கு அழைத்துச் செல்லும். உங்கள் இணையதள வடிவமைப்புச் செயல்பாட்டின் ஒரு பகுதியாக மேலே திரும்பு பொத்தானைச் சேர்க்க விரும்பினால் அல்லது அதை நீங்களே எப்படி உருவாக்குவது என்று யோசித்துக்கொண்டிருந்தால், கப்பலுக்கு வரவேற்கிறோம்!

எங்கள் குறியீடு இரண்டு பகுதிகளைக் கொண்டிருக்கும், CSS பாணிகள்மற்றும் சிறியவன் jQuery ஸ்கிரிப்ட். CSS உடன் ஆரம்பிக்கலாம்.

எங்கள் பட்டனுக்கான ஸ்டைல்கள் மற்றும் மார்க்அப்பை உருவாக்குவதன் மூலம் தொடங்குவோம். இதோ HTML பகுதி:

< link rel= "ஸ்டைல்ஷீட்" href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >

< a ஐடி= "பொத்தான்" >

பொத்தான் ஐடி பட்டனுடன் ஒரே ஒரு ஆங்கர் டேக்கைக் கொண்டிருக்கும். FontAwesome நூலகத்திற்கான இணைப்பையும் சேர்த்துள்ளோம், எனவே எங்கள் பொத்தானுக்கு ஐகானைப் பயன்படுத்தலாம்.

பொத்தானின் ஆரம்ப பாணிகள் இப்படி இருக்கும்:

#பொத்தான் (காட்சி: இன்லைன்-பிளாக்; பின்னணி-நிறம்: #FF9800; அகலம்: 50px; உயரம்: 50px; உரை-சீரமைப்பு: மையம்; எல்லை-ஆரம்: 4px; விளிம்பு: 30px; நிலை: நிலையானது; கீழே: 30px; வலது: 30px; மாற்றம்: பின்னணி-வண்ணம்: 1000;

பொத்தான் ஒரு மூட்டை உறுப்பு மற்றும் மூட்டைகள் முன்னிருப்பாக இன்லைன் உறுப்புகள் என்பதால், காட்சி சொத்தை இன்லைன் தொகுதிக்கு மாற்ற வேண்டும், இதன் மூலம் அதற்கு ஒரு அளவை ஒதுக்க முடியும்.

4px வட்டமான மூலைகளுடன் 50x50 px சதுர பட்டனை உருவாக்குவோம். பிரகாசமான ஆரஞ்சு நிறத்தையும் ஒவ்வொரு பக்கத்திலும் 30px தரத்தையும் தருவோம். நிலையான நிலை எப்போதும் நாம் பக்கத்தை ஸ்க்ரோல் செய்யும் போது நமது பொத்தானை அதே இடத்தில் இருக்க அனுமதிக்கிறது, மேலும் z-இண்டெக்ஸ் மிக அதிகமாக இருப்பதால் பொத்தான் எப்பொழுதும் வலைத்தளத்தின் மற்ற கூறுகளை மேலெழுதுகிறது. நாம் பட்டனின் மேல் வட்டமிடும்போது, ​​கர்சர் ஒரு சுட்டியாக மாறும் மற்றும் பின்னணி அடர் சாம்பல் நிறமாக மாறும். மாற்றத்தை சீராகச் செய்ய, பின்னணி-வண்ணப் பண்புக்கான மாற்றத்தை 0.3 வினாடிகளுக்கு அமைப்போம். மேலும், நாம் பட்டனை அழுத்தும் போது, ​​பின்னணி நிறமும் மாறி, சிறிது இலகுவாக மாறும்.

இப்போது எங்கள் பொத்தான் காலியாக உள்ளது, அதில் ஒரு ஐகானைச் சேர்ப்போம். இது போன்ற ஒரு ::after pseudo= உறுப்பைச் சேர்ப்பதன் மூலம் இதைச் செய்கிறோம்:

#பொத்தான்::பிறகு (உள்ளடக்கம்: "\f077"; எழுத்துரு-குடும்பம்: FontAwesome; எழுத்துரு-எடை: சாதாரண; எழுத்துரு-பாணி: சாதாரண; எழுத்துரு-அளவு: 2em; வரி-உயரம்: 50px; நிறம்: #fff; )

நாங்கள் மிகவும் பிரபலமான எழுத்துரு நூலகமான FontAwesome இலிருந்து ஒரு ஐகானைத் தேர்ந்தெடுக்கப் போகிறோம். செவ்ரான் அப் ஐகானுடன் ஆரம்பிக்கலாம்.

அதை ஒரு போலி-உறுப்பில் காட்ட, எழுத்துரு-குடும்பக் குறிச்சொல்லை FontAwesome என அமைத்து, உள்ளடக்கத்தில் உள்ள உங்கள் ஐகானுக்கு யூனிகோட் மதிப்பை ஒதுக்கவும்.

உங்கள் ஐகானை கிடைமட்டமாக மையப்படுத்த விரும்பினால், உங்கள் வரியின் உயரம் உங்கள் ஐகானின் உயரத்திற்கு சமமாக இருப்பதை உறுதிப்படுத்தவும்.

இந்த துணைப்பிரிவில், பொத்தானை எவ்வாறு வேலை செய்வது என்பது பற்றி பேசுவோம். இதைச் செய்வதற்கான எளிதான வழி jQuery JavaScript நூலகத்தைப் பயன்படுத்துவதாகும். முதலில் HTML மார்க்அப்பில் jQuery ஐ சேர்க்க வேண்டும். இறுதி உடல் குறிச்சொல்லுக்கு முன் இந்த வரியைச் சேர்க்கவும்.

< script src=" https:// cdnjs. மேகத்தோற்றம். com/ அஜாக்ஸ்/ லிப்ஸ்/ jQuery/3.1.1/ jQuery. நிமிடம். js">

இப்போது jQuery தொடரியல் பயன்படுத்தி நமது ஸ்கிரிப்டை எழுதலாம். jQuery வரிக்குப் பிறகு இந்த ஸ்கிரிப்டைச் சேர்க்கவும்:

jQuery(document).ready(function() (var btn = $("#button"); $(window).scroll(function() ( if ($(window).scrollTop() > )); btn.on ("கிளிக்", செயல்பாடு(e) (e.preventDefault(); $("html, body").animate((scrollTop:0), "300"); ));

இந்த ஸ்கிரிப்டை இன்னும் விரிவாகப் பார்ப்போம். குறியீட்டின் முதல் வரியை நீங்கள் கவனித்திருக்கலாம்:

jQuery(ஆவணம்) தயார்(செயல்பாடு () (

ஆவணம் முழுமையாக ஏற்றப்பட்டிருந்தால் மட்டுமே இந்தச் செயல்பாட்டிற்குள் குறியீட்டை இயக்க வேண்டும். உலாவியில் முழுமையாக ஏற்றப்படாத வலைப்பக்கத்தின் பகுதிகளுக்கு உங்கள் JavaScript குறியீடு மாற்றங்களைச் செய்ய விரும்பினால் பிழைகளைத் தடுக்க இது ஒரு சிறந்த வழியாகும். ஆவணம் முழுவதுமாக ஏற்றப்பட்ட பிறகு நாம் இயக்கும் குறியீடு இரண்டு முக்கிய குறியீடு தொகுதிகளைக் கொண்டுள்ளது, ஒவ்வொன்றும் அதன் சொந்த வேலையைச் செய்கின்றன. ஸ்கிரிப்ட்டின் முதல் பகுதி, பக்க ஸ்க்ரோல் ஒரு குறிப்பிட்ட புள்ளியை அடைந்த பிறகு, எங்கள் பொத்தான் தோன்றி மறைந்துவிடும். இரண்டாவது பகுதி, பொத்தானைக் கிளிக் செய்த பிறகு பக்கத்தை மேலே உருட்டும். அவை ஒவ்வொன்றையும் விரிவாகப் பார்ப்போம்.

இந்த செயல்பாட்டிற்கு பொறுப்பான குறியீடு இங்கே:

Var btn = $("#பொத்தான்");

$(ஜன்னல்).

நாம் முதலில் btn மாறியை அறிவித்து, பொத்தானின் ஐடியை ஒதுக்குவோம், இதனால் குறியீட்டில் அதை எளிதாகக் குறிப்பிடலாம். இது ஜாவாஸ்கிரிப்ட் கணக்கீடுகளை வேகமாகச் செய்ய உதவுகிறது. உறுப்பை ஒரு மாறியில் சேமித்தவுடன், ஜாவாஸ்கிரிப்ட் முழுப் பக்கத்தையும் பல முறை தேட வேண்டிய அவசியமில்லை.

jQuery ஒரு வசதியான .scroll() செயல்பாட்டைக் கொண்டுள்ளது.

ஒவ்வொரு முறையும் உங்கள் வலைப்பக்கத்தில் ஸ்க்ரோல் இருக்கும்போது செயல்படுத்தப்படும் குறியீட்டின் ஒரு பகுதியை இது பிணைக்கிறது. பக்கத்தை ஸ்க்ரோல் செய்யும் ஒவ்வொரு முறையும் செயல்படுத்தப்படும் செயல்பாட்டிற்கு இது ஒரு அளவுருவை எடுக்கும். ஸ்க்ரோல் செய்ய அமைக்கப்பட்ட கூடுதல் பண்புகளைக் கொண்ட பிரேம்கள் மற்றும் உறுப்புகள் போன்ற எந்த உருட்டக்கூடிய உறுப்புக்கும் இதைப் பயன்படுத்தலாம்.

எங்கள் உதாரணம் உட்பட, பெரும்பாலான சந்தர்ப்பங்களில் ஸ்க்ரோலிங் நிகழ்கிறது என்பதால், நாங்கள் அதை ஒரு சாளர உறுப்புக்கு பொதுவாகப் பயன்படுத்துகிறோம்.

$(சாளரம்). உருள்(செயல்பாடு()(

செயல்பாட்டின் உள்ளே if/else அறிக்கையை வைக்கிறோம்:

உருள்ப்பட்டியின் தற்போதைய நிலையைப் பெற, jQuery இன் உள்ளமைக்கப்பட்ட .scrollTop() முறையைப் பயன்படுத்தப் போகிறோம். உருட்டக்கூடிய பகுதிக்கு மேலே மறைத்து வைக்கப்பட்டுள்ள சில பிக்சல்களை இது வழங்குகிறது.

எனவே ஒவ்வொரு முறையும் நாம் பக்கத்தை ஸ்க்ரோல் செய்யும் போது, ​​ஜாவாஸ்கிரிப்ட் எத்தனை பிக்சல்கள் மறைக்கப்பட்டுள்ளது என்பதை சரிபார்த்து அவற்றை எண்ணுடன் ஒப்பிடுகிறது. எங்கள் விஷயத்தில் இந்த எண் 300 வரை இருக்கும், ஆனால் நீங்கள் விரும்பினால் அதை மாற்றலாம்.

நாம் 300px சென்றால், அது தோன்றும் வகையில் எங்கள் பட்டனில் ஒரு நிகழ்ச்சி வகுப்பைச் சேர்ப்போம். எண் 300 க்கும் குறைவாக இருந்தால், இந்த வகுப்பை அகற்றுவோம். வகுப்புகளைச் சேர்ப்பது மற்றும் அகற்றுவது jQuery மிகவும் பிரபலமாக இருப்பதற்கு மற்றொரு காரணம். addClass() மற்றும் removeClass() ஆகிய இரண்டு எளிய முறைகளைப் பயன்படுத்தி இதைச் செய்யலாம். இருப்பினும், எங்களின் CSS இல் இன்னும் ஷோ கிளாஸ் இல்லை, எனவே ஒன்றைச் சேர்ப்போம்:

$(சாளரம்). உருள்(செயல்பாடு()(

இயல்பாக, உங்கள் பொத்தான் மறைக்கப்படும், எனவே #பட்டன் உறுப்புக்கு இன்னும் சில விதிகளைச் சேர்க்க வேண்டும்:

#பொத்தான் (மாற்றம்: பின்னணி-வண்ணம் .3s, ஒளிபுகாநிலை .5s, தெரிவுநிலை .5s; ஒளிபுகாநிலை: 0; தெரிவுநிலை: மறைக்கப்பட்டது; )

மாற்றத்தை சீராகச் செய்ய, மாறுதல் பண்புக்கூறில் மேலும் இரண்டு மதிப்புகளைச் சேர்ப்போம், ஒளிபுகா மற்றும் தெரிவுநிலை, 0.5 வினாடிகளுக்கு அமைக்கவும்.

ஸ்கிரிப்ட்டின் இரண்டாம் பகுதி, ஒரு பொத்தானை அழுத்திய பின் மாடிக்குச் செல்ல உங்களை அனுமதிக்கிறது.

Btn.on("click", function(e) ( e.preventDefault(); $("html, body").animate((scrollTop:0), "300"); ));

நாம் இங்கு பார்க்கும் முதல் jQuery முறை on() .

அதன் முதல் அளவுரு என்பது ஜாவாஸ்கிரிப்ட் "கிளிக்" நிகழ்வாகும், இது ஒவ்வொரு முறையும் நமது உலாவியில் கிளிக் செய்யும் போது ஏற்படும். இரண்டாவது அளவுரு நிகழ்வு நிகழ்ந்தவுடன் இயங்கும் செயலாக்கச் செயல்பாடாகும்.

செயலாக்க செயல்பாடு ஒரு நிகழ்வு அளவுருவை ஏற்றுக்கொள்கிறது. நாம் என்ன வேண்டுமானாலும் பெயரிடலாம், ஆனால் மின் அல்லது நிகழ்வு பொதுவாக விரும்பப்படும். செயல்பாட்டிற்கு அனுப்ப நிகழ்வு அளவுரு தேவை மற்றும் அதைத் தடுக்கும் () முறைக்கு பயன்படுத்தவும். e.preventDefault() முறையானது, தற்செயலாக ஏதாவது ஒன்றைச் செய்வதிலிருந்து நிகழ்வைத் தடுக்கிறது, அதாவது இணைப்பு நம்மை அடுத்த பக்கத்திற்கு அழைத்துச் செல்லாது. எங்கள் விஷயத்தில் இது முக்கியமானதல்ல, ஏனெனில் எங்கள் ஆங்கர் உறுப்புக்கு href பண்புக்கூறு இல்லை மற்றும் எப்படியும் எங்களை அழைத்துச் செல்லாது.புதிய பக்கம்

, ஆனால் எப்போதும் இருமுறை சரிபார்ப்பது நல்லது.

jQuery .animate() முறைதான் முழு வித்தையையும் செய்கிறது.

$("html, body").animate((scrollTop:0), "300"); .animate() முறையின் முதல் அளவுரு, நாம் உயிரூட்ட வேண்டிய பண்புகளின் பட்டியல். எங்கள் சொத்து ஸ்க்ரோல்டாப் என்று அழைக்கப்படுகிறது, மேலும் அதன் மதிப்பு 0 இருக்க வேண்டும் என்று நாங்கள் விரும்புகிறோம். இந்த அளவுருவின் வகைஎனவே நாம் சுருள் பிரேஸ்களைப் பயன்படுத்த வேண்டும் மற்றும் விசை/மதிப்பு ஜோடி தொடரியல் பயன்படுத்தி நமது மதிப்புகளை எழுத வேண்டும்.

இரண்டாவது அளவுரு, நமது அனிமேஷனைத் தொடங்க விரும்பும் வேகம். இது மில்லி விநாடிகளில் அளவிடப்படுகிறது, மேலும் அதிக எண்ணிக்கையில், அனிமேஷன் மெதுவாக இருக்கும். இயல்புநிலை மதிப்பு 400, ஆனால் அதை 300 ஆக மாற்றலாம்.

இறுதியாக, எங்கள் பக்கத்தில் உள்ள HTML மற்றும் உடல் உறுப்புகளுக்கு அனிமேட் முறையைப் பயன்படுத்துகிறோம்.

இப்போது ஒவ்வொரு முறையும் நாம் பொத்தானைக் கிளிக் செய்தால், அது நம்மை மீண்டும் பக்கத்தின் மேல் பகுதிக்கு அழைத்துச் செல்லும்.

கோட்பென் டெமோவில் இறுதிப் பதிப்பைக் காணலாம். ஆர்ப்பாட்ட நோக்கங்களுக்காக மாதிரி உரையையும் சேர்த்துள்ளேன்.

CodePen இல் Matthew Cain (@matthewcain) எழுதிய Back to Top பட்டனுக்கான குறியீட்டைப் பாருங்கள்.

பக்க இடைமுக வடிவமைப்பில் "மேலே திரும்பு" பொத்தான் ஒரு பயனுள்ள கருவியாகும். உங்கள் தளத்தில் ஒன்று இருந்தால், அது தளத்துடன் பார்வையாளர்களின் தொடர்புகளை மிகவும் வசதியாக மாற்றும். நீங்கள் இணைய உருவாக்குநராக இல்லாவிட்டாலும், CSS மற்றும் JavaScript ஐப் புரிந்துகொள்ள இந்த வழிகாட்டி உதவும். இடுகை உங்களுக்கு பயனுள்ளதாக இருந்தது என்று நம்புகிறேன், நீங்கள் நிச்சயமாக அத்தகைய பொத்தானை உருவாக்க முடியும்!

"பேக் டு டாப்" அல்லது "" பொத்தான் நவீன வலைத்தளங்களின் பக்கங்களில் பிரபலமான மற்றும் பயனுள்ள உறுப்பு ஆகும், குறிப்பாக இந்தப் பக்கங்களில் நிறைய உள்ளடக்கம் இருக்கும் சந்தர்ப்பங்களில்.
முதலாவதாக, இவை பொதுவாக தளத்தின் பயன்பாட்டினை மேம்படுத்துகின்றன. ஒரு பயனர் பெரிய அளவிலான உள்ளடக்கத்தைப் படித்து, தளத்தின் மேல் பகுதிக்குத் திரும்ப பக்கத்தின் கீழே ஸ்க்ரோல் செய்தால், அவர் நிலையான ஸ்க்ரோலிங்கைப் பயன்படுத்துகிறார். பயனர் தானாகவே பக்கத்தின் மேல் பகுதிக்கு திருப்பி விடப்படுவதை உறுதிசெய்ய, தங்கள் பார்வையாளர்களைப் பற்றி சிந்திக்கும் தள டெவலப்பர்கள் மற்றும் நிர்வாகிகள் "மேலுக்குத் திரும்பு" பொத்தான்களின் பல்வேறு மாறுபாடுகளைப் பயன்படுத்துகின்றனர். இவை அதிகமாக இருக்கலாம் எளிய தீர்வுகள்கூடுதல் நூலகங்கள் அல்லது ஸ்கிரிப்ட்களைப் பயன்படுத்தாமல், அதே போல் நீட்டிக்கப்பட்ட செயல்பாடுகளுடன், நூலகத்தின் இணைப்பு மற்றும் ஒரு சிறிய செயல்படுத்தல் ஸ்கிரிப்ட்.

"பேக் டு டாப்" பொத்தான்கள் வெவ்வேறு வழிகளில் வடிவமைக்கப்பட்டுள்ளன, இவை சாதாரணமான உரை இணைப்புகளாகவும், கிளாசிக் தோற்றமுடைய பொத்தான்களாகவும், அம்புக்குறியுடன் கூடிய வட்ட பொத்தான்களாகவும் இருக்கலாம் அல்லது அவை பொருத்தமான வகையின் படத்தைப் பயன்படுத்தலாம். பெரும்பாலும், இந்த பொத்தான்கள் நிலையானதாக இருக்கும்;

இன்று, அன்று எளிய உதாரணம், "பேக் டு டாப்" பாப்-அப் பொத்தானில் சிறிதளவு இயக்கத்தைச் சேர்க்க, CSS அனிமேஷனை எவ்வாறு பயன்படுத்தலாம் என்பதைப் பார்ப்போம், அதே நேரத்தில், பொத்தான் செயல்படத் தேவையான jQuery நிகழ்வுகளைக் கொண்ட ஸ்கிரிப்டைப் பார்ப்போம்.

உங்கள் தளத்தில் ஒரு பொத்தானை இயக்க, மார்க்அப்பில் எந்த குறிச்சொற்களையும் சேர்க்க வேண்டிய அவசியமில்லை HTML பக்கங்கள். jQuery நூலகத்தை இணைத்து ஒரு சிறிய இயங்கக்கூடிய js ஐ எழுதினால் போதும், பொத்தான் வேலை செய்யும். style.css கோப்பை html ஆவணத்துடன் இணைப்பதன் மூலம் CSS ஐப் பயன்படுத்தி தோற்றம் மற்றும் அனிமேஷனை உருவாக்குவோம்.

எனவே, உங்கள் தளத்தில் இதுவரை jQuery லைப்ரரி இணைக்கப்படவில்லை என்றால், இணைப்பதன் மூலம் இதை எளிதாகச் செய்யலாம் தற்போதைய பதிப்புகூகுளின் உள்ளடக்க விநியோக நெட்வொர்க்கில் (CDN) இருந்து நேரடியாக, மூடும் குறிச்சொல்லுக்கு முன் பின்வரும் வரியைச் சேர்த்தால் போதும்:

கீழே, இந்த வரிக்கு கீழே, ஒரு சிறிய இயங்கக்கூடிய js ஐ வைக்கவும், இது ஒரு குறிப்பிட்ட தாமதத்துடன் எங்கள் பொத்தானைக் காண்பிக்கும், மேலும் அதன் முக்கிய செயல்பாட்டைச் செய்யும், பயனரை பக்கத்தின் மேல் நோக்கி சுமூகமாகத் திருப்பும்.

jQuery(document).ready(function($)( var //பக்கத்தின் மேல் ஸ்க்ரோல் வேகம் = 500, //html பட்டன் தளவமைப்பு $scrollTop = $(" ").appendTo("body"); $scrollTop.click(function(e)( e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate(( ஸ்க்ரோல்டாப்: 0), வேகம்); (600) ) $(சாளரம்).

நான் ஸ்கிரிப்ட்டில் சில கருத்துகளைச் சேர்த்தேன், பேசுவதற்கு, அதிக புரிதலுக்காக. நான் மேலே எழுதியது போல், இந்த முறை HTML பக்க மார்க்அப்பில் எந்த குறிச்சொற்களையும் சேர்க்க வேண்டிய அவசியத்தை நீக்குகிறது; பயனர் பக்கத்தை 300px மூலம் உருட்டும் போது, ​​செருகுநிரல் ஒரு பொத்தான் குறிச்சொல்லை எழுதும், எங்கள் விஷயத்தில் இது:

பக்கத்தின் உடலில், மூடும் குறிச்சொல்லுக்கு முன் அனைத்தும் ஒரே இடத்தில் இருக்கும்.

பட்டனை சீராக தோன்றி மறைக்க, 600 மில்லி விநாடிகள் கொடுக்கப்பட்ட வேகத்தில் .fadeIn () மற்றும் .fadeOut () செயல்பாடுகளைப் பயன்படுத்துகிறோம். பக்கத்தின் மேல் ஸ்க்ரோலிங் வேகம் 500 மில்லி விநாடிகளாக அமைக்கப்பட்டுள்ளது.

பொத்தானைக் குறிக்க நான் குறிச்சொல்லைப் பயன்படுத்தினேன் , அதற்கான இணைப்பு, நான் ஒரு ஹாஷ் (ஹாஷ்), தலைப்பு பண்புக்கூறைக் குறிப்பிட்டேன் - நீங்கள் பொத்தானின் மேல் வட்டமிடும்போது, ​​ஒரு நிலையான உதவிக்குறிப்பு காட்டப்படும், ஸ்க்ரோல்டாப் என்ற தேர்வாளர் பெயருடன் ஒரு குறிப்பிட்ட வகுப்பை ஒதுக்கி, எழுத்துருவிலிருந்து ஐகான் எழுத்துருவைப் பயன்படுத்தியது. இணைப்பின் தொகுப்பாக அற்புதமான தொகுப்பு .
இப்போது, ​​தேர்வாளரின் பெயரை அறிந்து, நேரடியாக CSS இல், சில பண்புகளைப் பயன்படுத்தி, எங்கள் பொத்தானை அனிமேட் செய்வோம், உருவாக்குவோம் தோற்றம், பக்கத்தில் அது எங்கு தோன்றும் என்பதை நாங்கள் தீர்மானிப்போம், மேலும் அனிமேஷனையும் இணைப்போம்.
css குறியீட்டின் உள்ளே, கிட்டத்தட்ட ஒவ்வொரு சொத்துக்கும் விரிவான கருத்துகளைச் சேர்த்துள்ளேன், எனவே எல்லாவற்றையும் விரிவாக விவரிக்கும் புள்ளியை நான் காணவில்லை, குறிப்பாக அனிமேஷன் விளைவு மற்றும் எழுத்துரு ஐகான்களை பொத்தான் உறுப்புகளாக இணைப்பதில் கவனம் செலுத்துவேன்.
ஐகான் வித்தியாசமாக இருக்கலாம், எடுத்துக்காட்டில் உள்ளதைப் போல அல்ல, முக்கிய விஷயம் என்னவென்றால், இது பொத்தானின் நேரடி நோக்கத்துடன் ஒத்துப்போகிறது, எங்கள் விஷயத்தில், இது எந்த குறியீட்டு சின்னமாகும், எடுத்துக்காட்டாக, ஒற்றை அம்புகள், பெரிய அல்லது மெல்லிய, உடன் அல்லது நிரப்பாமல், பொத்தானைக் கிளிக் செய்யும் போது ஸ்க்ரோலிங் திசையை தெளிவாகக் குறிப்பிடுகிறது.
எழுத்துரு அற்புதமான ஐகான்களைப் பயன்படுத்த, முழு தொகுப்பையும் பதிவிறக்கம் செய்ய வேண்டிய அவசியமில்லை, நூலகத்தை நேரடியாக இணைக்க முடியும், எடுத்துக்காட்டாக, பூட்ஸ்டார்ப் CDN உடன், HTML பிரிவில், பின்வரும் வரியை எழுதவும்:

Font Awesome ஐ இணைத்த பிறகு, நீங்கள் அவற்றை HTML குறியீட்டில் பயன்படுத்தலாம் அல்லது js இல் உள்ளதைப் போல, சிறப்பு வகுப்புகள், ஒரு அடிப்படை ஃபா மற்றும் ஒரு குறிப்பிட்ட வகை ஐகானுக்கு ஒரு வகுப்பைப் பயன்படுத்தலாம், எங்கள் விஷயத்தில் இது fa-angle-double-up ஆகும். . இணையதளத்தில் ஒரு குறிப்பிட்ட ஐகானின் வகுப்பை நீங்கள் கண்டுபிடிக்கலாம்.
ஐகான் கொள்கலனின் தோற்றம், பின்னணி அளவு மற்றும் நிறம், நிலைப்படுத்தல், எழுத்துரு நிறம் மற்றும் அளவு, இவை அனைத்தும் நேரடியாக css இல் தீர்மானிக்கப்படுகிறது, இது selector.scrollTop i இல் கவனம் செலுத்துகிறது.

/* பொத்தான் உடல், நிலை மற்றும் மாற்ற விளைவு */ .scrollTop ( /* முன்னிருப்பாக மறைக்கப்பட்டுள்ளது */ காட்சி: எதுவுமில்லை; /* சுற்று மூலைகள் */ -webkit-border-radius: 100%; -moz-border-radius: 100%: 100% எல்லை - * கர்சர் காட்சி */ கர்சர்: சுட்டி; bezier(0.42, 0, 0.58, 1); -ms-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1); cubic-bezier(0.42, 0, 0.58, 1) /* ஹோவரில் உள்ள பொத்தானை மேலே மாற்றவும் */ .scrollTop:hover (கீழே: 2rem ) / * கூடுதல் பொத்தான் வடிவமைப்பு கூறுகள் */ .scrollTop:முன், .scrollTop:பின் ( உள்ளடக்கம் : ""; மேல்: 0; பின்னணி நிறம்: #766;

அனிமேஷனையே கருத்தில் கொள்ள வேண்டும். அனிமேஷன் விளைவு முழு பொத்தானுக்கும் பயன்படுத்தப்படுவதில்லை, ஆனால் கூடுதல் போலி உறுப்புகளுக்கு: பின் மற்றும்: முன் . ஒரு CSS அனிமேஷனை உருவாக்க, இந்த உறுப்புகளின் பாணியில் நீங்கள் ஒரு அனிமேஷன் சொத்தை சேர்க்க வேண்டும், இது ஒரு பெயரை வரையறுக்கவும், அனிமேஷனின் முடுக்கம் மற்றும் கால அளவை சரிசெய்யவும், அத்துடன் அனிமேஷன் எவ்வாறு பாய வேண்டும் என்பதற்கான பிற விவரங்களையும் அனுமதிக்கும். அனிமேஷனின் தோற்றமானது @keyframes ஐப் பயன்படுத்தி கட்டமைக்கப்படுகிறது, இது அனிமேஷனின் பிரேம்களை உள்ளமைக்கும் விசைகளின் தொகுப்பாகும்.

எங்கள் எடுத்துக்காட்டில், அனிமேஷன் பெயர் clickMe, கால அளவு 1.8s, தாமதம் 333ms for:before and 777ms for pseudo-element:after. அனிமேஷனின் மறுநிகழ்வுகளின் எண்ணிக்கையையும் நாங்கள் தீர்மானிக்கிறோம் - எல்லையற்ற முடிவிலி மற்றும் அனிமேஷன் வகையை எளிதாக்கும் - முடுக்கம் ஆரம்பத்தில்.

அனிமேஷனின் தற்காலிக பண்புகளை நாங்கள் அமைத்த பிறகு, அனிமேஷனின் தோற்றத்தை தீர்மானிக்க இது உள்ளது, இது @keyframes தொகுதிக்குள் செய்யப்படுகிறது. முதலில், அனிமேஷனின் பெயர் கொடுக்கப்பட்டுள்ளது, பின்னர் அதன் படிகள் சுருள் பிரேஸ்களுக்குள் விவரிக்கப்பட்டுள்ளன. குறியீட்டு எடுத்துக்காட்டில் இருந்து, ஒளிபுகா சொத்தின் பிரேம்கள் (வெளிப்படைத்தன்மை) மற்றும் அளவிலான செயல்பாட்டுடன் உருமாற்ற உறுப்பின் மாற்றம் ஆகியவை பயன்படுத்தப்படுகின்றன - உறுப்பு அளவு. அனிமேஷன் படிகள் சதவீதங்களைப் பயன்படுத்தி குறிப்பிடப்படுகின்றன.
அனிமேஷன் CSS பண்புகள்வெப்கிட் உலாவிகளுக்காக தனித்தனியாக விவரிக்கப்பட்டுள்ளது @-webkit-keyframes மற்றும் Mozilla உலாவிஇந்த இணைய உலாவிகளில் அனிமேஷன்கள் தவறாகக் காட்டப்படுவதைத் தடுக்க Firefox @-moz-keyframes.

அவ்வளவுதான். மீண்டும் ஒருமுறை, "மேலே திரும்பு" பொத்தான் எவ்வாறு செயல்படுகிறது என்பதற்கான நேரடி உதாரணத்தைப் பார்க்கவும், உங்களுக்குத் தேவைப்பட்டால், காப்பகத்தில் தொகுக்கப்பட்ட மற்றும் Y.Disk இல் உள்ள மேகக்கணியில் இடுகையிடப்பட்ட ஆதாரங்களைப் பதிவிறக்கவும்.

வாழ்த்துகள், ஆண்ட்ரே

ஒரு தளத்திற்கான "அப்" பொத்தான் போன்ற செயல்பாடு அதன் பார்வையாளர்களுக்கு இணைய வளத்தை மிகவும் வசதியாக்குகிறது. பக்கத்தில் எங்கிருந்தும் பக்கத்தின் மேல் பகுதிக்கு எளிதாகச் செல்ல இது உதவுகிறது. நீண்ட ஸ்க்ரோல் டவுன் தேவைப்படும் பெரிய கட்டுரைகளைக் கொண்ட ஆன்லைன் கடைகள் மற்றும் தளங்களுக்கு இது அவசியம்.

அன்று இந்த நேரத்தில்பெரும்பாலான தளங்களில் "அப்" பொத்தான் போன்ற செயல்பாடு எதுவும் இல்லை, அதைப் பற்றி முக்கியமான எதுவும் இல்லை. ஆனால் அதன் பயன்பாடு இணைய வளத்திற்கும் அதன் பார்வையாளர்களுக்கும் பல நன்மைகளைத் தரும்.

இணைய வளத்தின் பக்கம் அதிக அளவில் தகவலுடன் ஏற்றப்படும்போது, ​​ஒரு தகவல் கட்டுரை அதிக இடத்தை எடுத்துக் கொள்ளும் போது, ​​மவுஸ் வீலைப் பயன்படுத்தி பக்கத்தை கீழே உருட்ட வேண்டியிருக்கும் போது இது அடிக்கடி நிகழ்கிறது. இது தவிர, கட்டுரையின் முடிவில் பல கருத்துகள் இருக்கலாம்.

ஒரு பார்வையாளர் ஒரு கட்டுரையைப் படிக்கும்போது, ​​பக்கத்தை கீழே ஸ்க்ரோல் செய்வதில் சிரமம் எதுவும் இல்லை, ஆனால் உரை இறுதிக்கு வந்து நீங்கள் மேலே செல்லும்போது, ​​அது கொஞ்சம் சோர்வடையத் தொடங்குகிறது. பெரும்பாலான மக்கள் நீண்ட நேரம் உருட்டுவதற்கு மிகவும் சோம்பேறியாக இருப்பார்கள், மேலும் அவர்கள் தளத்தை அதன் விரிவாக்கங்களைச் சுற்றித் திரிவதற்குப் பதிலாக மூடிவிடுவார்கள்.

ஒரு பொத்தானைப் பயன்படுத்தி உடனடியாக பக்கத்தின் மேல் பகுதிக்குச் செல்வது, தளத்தில் உங்கள் நேரத்தை மிகவும் வசதியாக்குகிறது.

வளத்திற்கான நேர்மறையான அம்சங்கள் கடந்த கால காரணிகளிலிருந்து வருகின்றன, ஏனெனில் தளத்தைச் சுற்றி எளிமைப்படுத்தப்பட்ட வழிசெலுத்தல் நடத்தை காரணிகளை மேம்படுத்துகிறது, ஏனெனில் அனைத்து பார்வையாளர்களும் தங்கள் செயல்களில் மிகவும் சுறுசுறுப்பாகவும் மற்ற பக்கங்களுக்குச் செல்வார்கள்.

இவ்வாறு, தரவு அனைத்து தேடுபொறிகளின் தளத்தை நோக்கிய அணுகுமுறையை பாதிக்கிறது மற்றும் தேடல் முடிவுகளில் அதன் இடத்தில் முன்னேற்றத்திற்கு வழிவகுக்கிறது.

• ஒரு படத்தை உருவாக்குதல்;
• ஒரு ஸ்கிரிப்டை உருவாக்குதல்;
• ஒரு பொத்தான் பாணியை உருவாக்குதல்;
• தளத்தில் சேர்க்கிறது.

தளத்தில் "மேலே" பொத்தானைச் சேர்க்க, நீங்கள் முதலில் ஐகானை உருவாக்க வேண்டும், அதைக் கிளிக் செய்தால், பயனரை பக்கத்தின் மேல் பகுதிக்கு நகர்த்தும். இதைச் செய்ய, நீங்கள் ஆயத்த விருப்பங்களைப் பயன்படுத்தலாம், அவற்றில் நீங்கள் எப்போதும் மிகவும் பொருத்தமான ஒன்றைத் தேர்வு செய்யலாம்.

பொத்தானின் தோற்றத்தை மேம்படுத்த, சில மேம்பாடுகளைச் செய்வது அவசியம், அதாவது, CSS அடிப்படையில் பின்னணி படங்களை இணைக்க உங்களை அனுமதிக்கும் ஒரு மனிதனை உருவாக்கவும், அதன் மூலம் அனிமேஷனை உருவாக்கவும்.

க்கு வரைகலை வேலைகள்நீங்கள் எந்த எடிட்டரையும் பயன்படுத்தலாம். ஆனால் மிகவும் வசதியான விருப்பம் PIXLR ஆன்லைன் சேவையாக இருக்கும், ஏனெனில் நீங்கள் இங்கே எதையும் பதிவிறக்கம் செய்ய வேண்டியதில்லை, அதை உங்கள் உலாவியில் நேரடியாகப் பயன்படுத்தலாம்.

தொடங்குவதற்கு, தோன்றும் எடிட்டர் சாளரத்தில், "கணினியிலிருந்து படத்தைப் பதிவேற்று" புலத்தைத் தேர்ந்தெடுக்க வேண்டும். உதாரணமாக ராக்கெட்டின் படத்தை எடுத்துக் கொள்வோம்.

தேர்ந்தெடுக்கப்பட்ட ஐகானின் பரிமாணங்கள் மிகப் பெரியதாக இருந்தால், நீங்கள் ஒரு சிறிய அளவு சரிசெய்தல் செய்ய வேண்டும். இதைச் செய்ய, மேல் மெனுவிற்குச் சென்று, "திருத்து" புலத்தைத் தேர்ந்தெடுத்து, "இலவச உருமாற்றம்..."

அடுத்து, சிறப்பு குறிப்பான்கள் படத்திற்கு அடுத்ததாக தோன்றும், அவற்றை நகர்த்துவதன் மூலம், நீங்கள் படத்தின் அளவை மாற்றலாம். விகிதாச்சாரத்தை பராமரிக்க, நீங்கள் Shift விசையைப் பயன்படுத்தலாம், அதை வைத்திருக்கும் போது, ​​நீங்கள் நீல குறிப்பான்களை நகர்த்த வேண்டும். இந்த செயல்களின் முடிவில், ராக்கெட்டின் படம் பெறப்படுகிறது.

அடுத்த கட்டமாக அடுக்கின் நகலை உருவாக்க வேண்டும்.

இப்போது நீங்கள் ராக்கெட் படத்தை புதிய லேயரில் இருந்து சிறிது மேலே நகர்த்த வேண்டும். இதைச் செய்ய, இடது மெனுவின் இரண்டாவது நெடுவரிசையில் அமைந்துள்ள நகர்வு கருவி மற்றும் விசைப்பலகையில் மேல் அம்புக்குறியைப் பயன்படுத்துவது வசதியாக இருக்கும்.

இப்போது நீங்கள் மேல் படத்தை கருப்பு மற்றும் வெள்ளை செய்ய வேண்டும். மேல் மெனுவில் உள்ள “திருத்தம்” - “சாயல்/செறிவு” உருப்படியைப் பயன்படுத்தி இதைச் செய்யலாம். முழுமையான தேய்மானத்திற்கு, செறிவு ஸ்லைடரை -100 ஆக அமைக்க வேண்டும். இந்த நடவடிக்கைஒரு விளைவை உருவாக்க உங்களை அனுமதிக்கும், அதில் நீங்கள் வட்டமிடும்போது "அப்" பொத்தான் கருப்பு மற்றும் வெள்ளை நிறத்தில் இருந்து நிறமாக மாறும்.

இரண்டு படங்களைச் சுற்றியுள்ள கூடுதல் இடத்தை அகற்றுவதே இறுதித் தொடுதல். இதைச் செய்ய, இடது மெனுவிலிருந்து "பயிர்" உருப்படியைத் தேர்ந்தெடுத்து ஒரு செவ்வகத்தில் இரண்டு ராக்கெட்டுகளை மட்டும் தேர்ந்தெடுக்கவும். செதுக்க, Enter விசையை அழுத்தவும்.

இதன் விளைவாக தேவையற்றது இல்லாத ஒரு படம் இலவச இடம். இந்த தரவு அடுத்த கட்டத்தில் பயனுள்ளதாக இருக்கும் என்பதால், பெறப்பட்ட படத்தின் அகலம் மற்றும் உயரத்தை நீங்கள் எழுத வேண்டும்.

சேமிக்க, நீங்கள் "கோப்பு" - "சேமி" என்பதைக் கிளிக் செய்ய வேண்டும், அங்கு இடது உருப்படியான "எனது கணினி" இல் நாம் படத்தின் பெயரை எழுதுகிறோம் (ஆங்கில தளவமைப்பு மட்டும்), வடிவமைப்பைத் தேர்ந்தெடுக்கவும் (இல் இந்த வழக்கில்- PNG) மற்றும் "ஆம்" பொத்தானைக் கிளிக் செய்யவும்.

இந்த வழக்கில் ஸ்கிரிப்ட் எழுத வேண்டிய அவசியமில்லை. முடிக்கப்பட்ட குறியீட்டில் சில திருத்தங்களைச் செய்வதன் மூலம் பொதுவில் கிடைக்கும் விருப்பத்தைப் பயன்படுத்த முடியும்.

இதைச் செய்ய, நீங்கள் எந்த குறியீடு எடிட்டரையும் பதிவிறக்க வேண்டும். மிகவும் பிரபலமான மற்றும் இலவச விருப்பம் Notepad++ ஆகும். அதை நிறுவிய பின், இந்த குறியீடு அனைத்தையும் நகலெடுத்து அதில் ஒட்ட வேண்டும்:

ஒரு தளத்திற்கான ஸ்க்ரோல் அப் பட்டனை நிறுவ, தேவையான இடத்தில் குறியீட்டை வைக்க வேண்டும். குறிச்சொல்லுக்கு முன் அதை உள்ளிட வேண்டும் .

பெரும்பாலும், தளத்திற்கான "மேல்" பொத்தான் கீழே ("அடிக்குறிப்பு") அமைந்துள்ளது.

தளத்தின் style.css கோப்பில் பின்வரும் குறியீட்டைச் சேர்க்க வேண்டும்:

இந்த வழக்கில், படத்தின் அகலம் மற்றும் உயரத்திற்கான தரவு உங்களுக்குத் தேவைப்படும். பெறப்பட்ட தரவை குறியீட்டில் உள்ளிடுவது மட்டுமே எஞ்சியிருக்கும், மேலும் தளத்திற்கான "மேல்" பொத்தான் தயாராக இருக்கும்! வேறென்ன?

இந்த CMS க்கு, "மேல்" பொத்தானை செருகுநிரல்களைப் பயன்படுத்தி உருவாக்கலாம், அதே போல் சுயாதீனமாகவும்.

செருகுநிரல் முறை மிகவும் வசதியானது மற்றும் நிறுவ எளிதானது, ஏனெனில் நீங்கள் செய்ய வேண்டியது எல்லாம் நிறுவு பொத்தானைக் கிளிக் செய்து சொருகி மெனுவில் உள்ள அனைத்து செயல்பாடுகளையும் உள்ளமைக்க வேண்டும்.

பிந்தையதைத் தேர்ந்தெடுப்பது எச்சரிக்கையுடன் அணுகப்பட வேண்டும், ஏனெனில் அதனுடன் நீங்கள் தளத்திற்கு ஒரு வைரஸை எளிதாக வாங்கலாம். மிகவும் பிரபலமான மற்றும் நிரூபிக்கப்பட்ட விருப்பமானது மேலே ஸ்க்ரோல் செய்யும் சொருகி ஆகும். நிலையான வேர்ட்பிரஸ் செருகுநிரல் தேடலைப் பயன்படுத்தி நீங்கள் பதிவிறக்கலாம்.

இந்த நீட்டிப்பு பல செயல்பாடுகளைக் கொண்டுள்ளது, மேலும் ஒரு வேர்ட்பிரஸ் தளத்திற்கான "மேலே" பொத்தானைத் தனிப்பயனாக்குவது மிகவும் எளிதாக இருக்கும். அனைத்து மதிப்புகளையும் மாற்ற வேண்டிய அவசியமில்லை;

நீங்கள் பார்க்க முடியும் என, செருகுநிரல்களைப் பயன்படுத்தி "அப்" பொத்தானை நிறுவுவது மிகவும் எளிது. ஆனால் ஒரு முக்கியமான நுணுக்கம் உள்ளது, அது அனைவருக்கும் நிறுவப்பட்ட சொருகி CMS ஐ ஏற்றுகிறது. இது இணைய வளத்தின் வேகத்தை பாதிக்கலாம். அதனால்தான் பெரும்பாலான வலைத்தள உரிமையாளர்கள் குறியீட்டில் நேரடியாக அனைத்து மாற்றங்களையும் செய்ய முயற்சி செய்கிறார்கள், பயன்படுத்தவில்லை மூன்றாம் தரப்பு நீட்டிப்புகள். HTML இல் இணையதளத்திற்கான "அப்" பொத்தானை உருவாக்கலாம், இது நுகரப்படும் ஆதாரங்களைக் குறைக்கும்.

அனைவரையும் மாற்றும் முன் கணினி கோப்புகள் Wordpress அவற்றை உருவாக்க வேண்டும் காப்புப்பிரதிகள். அடுத்து, மேலே விவரிக்கப்பட்ட உங்கள் சொந்த பொத்தானை உருவாக்க அனைத்து படிகளையும் நீங்கள் பின்பற்றலாம்.

CMS Joomla ஆனது Wordpress போன்று செருகுநிரல்களை நிறுவுவதையும் ஆதரிக்கிறது. ஜூம்லா 3 இல் உள்ள தளத்திற்கான "மேல்" பொத்தானின் மிகவும் வெற்றிகரமான பதிப்பு, பக்கத்தின் மேல் எனப்படும் நீட்டிப்பாகும்.

இந்த CMS இல், "நீட்டிப்பு மேலாளர்" மூலம் எந்த செருகுநிரலையும் நிறுவ முடியும். இதைச் செய்ய உங்களுக்குத் தேவை:

• இணையத்தில் சொருகி பதிவிறக்கவும்;
• நீட்டிப்பு மேலாளரில் உள்ள "உலாவு" பொத்தானைக் கிளிக் செய்க;
• பதிவிறக்கம் செய்யப்பட்ட காப்பகத்தைத் தேர்ந்தெடுக்கவும்;
• "பதிவிறக்கு" என்பதைக் கிளிக் செய்து நிறுவவும்.

இப்போது நீங்கள் அதை செருகுநிரல் மேலாளரில் செயல்படுத்த வேண்டும். இதைச் செய்ய, நீங்கள் இந்த பகுதிக்குச் செல்ல வேண்டும், சொருகி கண்டுபிடித்து அதன் நிலையை "இயக்கப்பட்டது" என்று மாற்றவும்.

பக்கத்தின் மேல் பின்வரும் செயல்பாடு உள்ளது:

• இயக்கு / நிர்வாகி - இணைய வளத்தில் மட்டும் விருப்பத்தை செயல்படுத்துகிறது, ஆனால் Joomla CMS பேனலிலும்.
• பொத்தான் வெளிப்படுத்தும் நிலை - "மேல்" பொத்தான் தோன்றுவதற்கு பயனர் எத்தனை பிக்சல்களை ரிவைண்ட் செய்ய வேண்டும்.
• பொத்தான் உரையைத் தவிர்க்கவும் - பொத்தானில் உரையின் இருப்பு.
• எப்போதும் மேலே - தளத்தின் பக்கம் எப்போதும் அதன் தொடக்கத்தில் இருந்து காட்டப்படும். பக்கத்தில் ஒரு குறிப்பிட்ட இடத்திற்கு ஸ்க்ரோல் செய்ய ஆங்கர்களைப் பயன்படுத்தும் போது, ​​இந்த விருப்பம் செயல்படுத்தப்பட வேண்டியதில்லை.
• மென்மையான ஸ்க்ரோல் - பக்க ஸ்க்ரோலிங் மென்மையாக்குகிறது.
• ஸ்க்ரோல் காலம் - பக்கம் முழுவதுமாக ஆரம்பத்திற்கு நகரும் நேரம்.
• உருள் மாற்றம் - ஸ்க்ரோலிங்கில் சிறந்த காட்சி விளைவுகளைச் சேர்க்கிறது.
• மாற்றத்தை எளிதாக்குதல் - பக்கத்தின் மேல் நோக்கி நகர்வதை "எளிமைப்படுத்துதல்".
• இணைப்பு இடம் - ஐகானின் இடம். தரநிலையின்படி, பொத்தான் கீழ் வலது மூலையில் அமைந்துள்ளது.
• பாங்குகளைப் பயன்படுத்தவும் - தனிப்பட்ட பொத்தான் பாணியை, கீழே உள்ள புலத்தில் அமைக்கலாம். எதிர்மறை மதிப்புக்கு மாறினால், அனைத்து ஸ்டைலிங் அளவுருக்களும் செயலில் உள்ள தள தீமில் இருந்து எடுக்கப்படும்.
• இணைப்பு நடை - உங்கள் பொத்தான் பாணி அளவுருக்களை உள்ளிடுவதற்கான புலம்.

"அப்" பொத்தானின் பாணியை நீங்களே தனிப்பயனாக்க, உங்களுக்கு குறைந்தபட்சம் CCS பற்றிய அறிவு இருக்க வேண்டும். IN இல்லையெனில்இறுதி அளவுருவின் மதிப்பை "இல்லை" க்கு மாற்றுவது மதிப்பு.

மற்றொரு முக்கியமான நுணுக்கம் என்னவென்றால், ஐகானில் உள்ள வழக்கமான கல்வெட்டில் ஆங்கில உரை உள்ளது: மேலே திரும்பவும். அத்தகைய உரை ரஷ்ய மொழி தளத்தில் இருக்க முடியாது, எனவே நீங்கள் அதை செருகுநிரல் அளவுருக்களில் முடக்க வேண்டும் அல்லது ரஷ்ய மொழியில் மாற்ற வேண்டும்.

இந்த கல்வெட்டை மாற்ற, நீங்கள் FTP அல்லது உள்ளமைக்கப்பட்ட ஹோஸ்டிங்கைப் பயன்படுத்தி தள சேவையகத்தில் உள்நுழைய வேண்டும் கோப்பு மேலாளர். அடுத்து, “/administrator/language/en-GB/” கோப்பகத்தில் “en-GB.plg_system_topofthepage.ini” என்ற கோப்பைக் கண்டறிய வேண்டும்.

உரையை மாற்றுவதற்கு முன், நீங்கள் குறியாக்கத்தை மாற்ற வேண்டும் இந்த ஆவணத்தின் UTF-8க்கு. இது ரஷ்ய எழுத்துக்களின் சாதாரண காட்சிக்கு அனுமதிக்கும்.

மேற்கோள் குறிகளில் உள்ள சொற்றொடரை ரஷ்ய மொழியில் மாற்றவும். "மேலே!", "ஆரம்பத்திற்கு!" போன்ற சொற்றொடர்களை நீங்கள் பயன்படுத்தலாம். அல்லது "மேலே!"

Ucoz இல் உள்ள தளத்திற்கான "அப்" பொத்தானை குறியீடு உட்செலுத்தலைப் பயன்படுத்தி செய்யப்பட வேண்டும், ஏனெனில் இந்த CMSக்கான செருகுநிரல்களை இணைப்பது சாத்தியமற்றது. இருப்பினும், இதற்கு கணினி கோப்புகளின் நீண்ட ஆய்வு தேவையில்லை மற்றும் தேவையான வரிகளை நீங்கள் செருக வேண்டும் சிறிய குறியீடுதேவையான இடத்திற்கு.

நிறுவலுக்கு நமக்கு இது தேவைப்படும்:

• "கண்ட்ரோல் பேனல் -> வடிவமைப்பு -> வடிவமைப்பு மேலாண்மை (வார்ப்புருக்கள்) -> தளத்தின் கீழே;
• ஸ்கிரிப்டைச் செருகவும் (திட்டத்தின் அதிகாரப்பூர்வ வலைத்தளம் மற்றும் மூன்றாம் தரப்பு ஆதாரங்களில் காணலாம்).

இதற்குப் பிறகு, கீழ் வலது மூலையில் ஒரு ஐகான் தோன்றும், பயனரை பக்கத்தின் மேல் பகுதிக்கு நகர்த்துகிறது.

நீங்கள் பார்க்க முடியும் என, எந்த CMS களுக்கும் "மேலே திரும்பு" பொத்தானை நிறுவுவது குறிப்பாக கடினமாக இல்லை. நீங்கள் ஒரு தானியங்கி நிறுவல் முறை (செருகுநிரல்கள்) அல்லது கையேடு ஒன்றைப் பயன்படுத்தலாம். இருப்பினும், கடைசி விருப்பம் மிகவும் பொருத்தமானது, ஏனெனில் இது தளத்தின் செயல்திறனில் எதிர்மறையான தாக்கத்தை ஏற்படுத்தாது.

அதிக எண்ணிக்கையிலான நீட்டிப்புகள் வளத்தின் செயல்திறனில் எதிர்மறையான தாக்கத்தை ஏற்படுத்தும் என்பதால், தள வளங்களின் நுகர்வைக் குறைக்க, HTML தளத்திற்கான "மேலே" பொத்தானைப் பயன்படுத்தலாம். ஒரு "அப்" பொத்தான் செருகுநிரல் தளப் பக்கங்களின் ஏற்றுதல் நேரத்தை பெரிதும் பாதிக்காது, ஆனால் பெரும்பாலான சந்தர்ப்பங்களில் பயனர் CMS இல் குறைந்தது ஒரு டஜன் செருகுநிரல்களை நிறுவியுள்ளார். இந்த வழக்கில், எந்த சொருகியும் தள பக்கங்களின் செயல்திறனை எதிர்மறையாக பாதிக்கும்.