የጣቢያው የ"ላይ" ቁልፍ፡ እንዴት እንደሚደረግ

ዝርዝር ሁኔታ:

የጣቢያው የ"ላይ" ቁልፍ፡ እንዴት እንደሚደረግ
የጣቢያው የ"ላይ" ቁልፍ፡ እንዴት እንደሚደረግ
Anonim

እንደ የጣቢያው "ላይ" ቁልፍ ያለው ተግባር የኢንተርኔት ሃብቱን ለጎብኚዎቹ የበለጠ ምቹ ያደርገዋል። በቀላሉ ከገጹ ላይ ከየትኛውም ቦታ ወደ የገጹ የላይኛው ክፍል እንዲሄዱ ያግዝዎታል. ረጅም ወደ ታች ማሸብለል ለሚያስፈልጋቸው የመስመር ላይ መደብሮች እና ጣቢያዎች ይህ ግዴታ ነው።

ምንድን ነው

በአሁኑ ጊዜ፣አብዛኞቹ ጣቢያዎች እንደ "ላይ" ቁልፍ ተግባር የላቸውም፣ እና በዚህ ውስጥ ምንም ወሳኝ ነገር የለም። ግን አጠቃቀሙ ለኢንተርኔት ግብአትም ሆነ ለጎብኚዎቹ ብዙ ጥቅሞችን ያስገኛል።

የጎብኝዎች ጥቅም

ብዙውን ጊዜ የሚከሰተው የኢንተርኔት መገልገያ ገጽ በመረጃ ሲሞላ፣ መረጃ ሰጪ መጣጥፍ ብዙ ቦታ ሲይዝ እና ገጹን በመዳፊት መንኮራኩሩ ማሸብለል ሲኖርብዎት ነው። ከዚህ በተጨማሪ በጽሁፉ መጨረሻ ላይ ብዙ አስተያየቶች ሊኖሩበት ይችላሉ።

አንድ ጎብኚ አንድን ጽሑፍ ሲያነብ ገጹን ወደ ታች ማሸብለል ምንም የሚያደክም ነገር የለም፣ ነገር ግን ጽሑፉ አብቅቶ ወደ ላይ መውጣት ሲኖርብዎት ትንሽ ድካም ይጀምራል። ብዙ ሰዎች በቀላሉ ለረጅም ጊዜ ለማሸብለል በጣም ሰነፍ ይሆናሉ፣ እና በቦታዎቹ ዙሪያ ሌላ የእግር ጉዞ ከማድረግ ይልቅ ጣቢያውን በቀላሉ ይዘጋሉ።

አዝራሩን በመጠቀምወዲያውኑ ወደ የገጹ አናት ለመሄድ በጣቢያው ላይ ጊዜ ለማሳለፍ የበለጠ አመቺ ያደርገዋል።

ጥቅም ለኢንተርኔት መገልገያ

ለድር ጣቢያ የላይ አዝራር
ለድር ጣቢያ የላይ አዝራር

የሀብቱ አወንታዊ ገፅታዎች ካለፉት ምክንያቶች የተገኙ ናቸው፣ ምክንያቱም ቀላል የጣቢያ አሰሳ የባህሪ ሁኔታዎችን ስለሚያሻሽል ሁሉም ጎብኚዎች በተግባራቸው የበለጠ ንቁ ሆነው ወደ ሌሎች ገፆች ስለሚሄዱ።

በመሆኑም እነዚህ የባህሪ ምክንያቶች የሁሉንም የፍለጋ ፕሮግራሞች ለጣቢያው ያለውን አመለካከት ይነካሉ እና በፍለጋ ውጤቶቹ ውስጥ ያለው ቦታ መሻሻል ያስገኛል።

በገጹ ላይ ያለውን የ"up" ቁልፍ እንዴት እራስዎ እንደሚሰራ

ለኤችቲኤምኤል ድህረ ገጽ ወደ ላይ አዝራር
ለኤችቲኤምኤል ድህረ ገጽ ወደ ላይ አዝራር

ከተጨማሪ በመስራት ላይ። ጥቂት በጣም ቀላል ደረጃዎችን ብቻ በመከተል በማንኛውም ጊዜ በሲኤምኤስ ላይ ለአንድ ጣቢያ የመጠቅለያ ቁልፍ መስራት ይችላሉ፡

  • ምስል መፍጠር፤
  • ስክሪፕት መፍጠር፤
  • የአዝራር ዘይቤ ፍጠር፤
  • ወደ ጣቢያው በማከል ላይ።

የአዝራር ምስል

በገጹ ላይ የ"ላይ" ቁልፍ ለመጨመር መጀመሪያ አዶውን ራሱ መስራት ያስፈልግዎታል፣ ሲጫኑ ተጠቃሚው ወደ ገፁ አናት ይሄዳል። ይህንን ለማድረግ, ዝግጁ የሆኑ አማራጮችን መጠቀም ይችላሉ, ከነሱ መካከል ሁል ጊዜ በጣም ተስማሚ የሆነውን መምረጥ ይችላሉ.

የአዝራሩን ገጽታ ለማሻሻል አንዳንድ ማሻሻያዎችን ማድረግ አለብን፣ እነሱም በCSS ላይ ተመስርተው የበስተጀርባ ምስሎችን እንድናጣምር የሚያስችለንን sprite ለመስራት እና ከነሱ አኒሜሽን መፍጠር።

ለግራፊክ ስራዎች ማንኛውንም አርታኢ መጠቀም ይችላሉ። ግን በጣም ምቹ አማራጭ የመስመር ላይ አገልግሎት ይሆናል. PIXLR፣ እዚህ የሚወርድ ነገር ስለሌለ እና በአሳሽዎ ውስጥ በቀጥታ ሊጠቀሙበት ይችላሉ።

ለመጀመር በሚታየው የአርታዒ መስኮት ውስጥ "ምስል ከኮምፒዩተር ስቀል" የሚለውን መስክ ይምረጡ። የሮኬትን ምስል እንደ ምሳሌ እንውሰድ።

በድር ጣቢያው ላይ እንዴት እንደሚሠራ አዝራር
በድር ጣቢያው ላይ እንዴት እንደሚሠራ አዝራር

የተመረጠው አዶ መጠን በጣም ትልቅ ከሆነ ትንሽ መጠን ማስተካከያ ማድረግ ያስፈልግዎታል። ይህንን ለማድረግ ወደ ላይኛው ሜኑ ይሂዱ እና "ማስተካከያ" የሚለውን መስክ ይምረጡ እና ከ"ነጻ ትራንስፎርሜሽን …" በኋላ

በመቀጠል ልዩ ምልክቶች ከሥዕሉ ቀጥሎ ይታያሉ፣ ይህም የምስሉን መጠን መቀየር ይችላሉ። ሚዛኑን ለመጠበቅ፣ ሰማያዊ ምልክቶችን ለማንቀሳቀስ የሚያስፈልግዎትን የ Shift ቁልፍ መጠቀም ይችላሉ። በእነዚህ ደረጃዎች መጨረሻ ላይ የሮኬት ምስል ተገኝቷል።

የሚቀጥለው እርምጃ የንብርብሩን ቅጂ መፍጠር ነው።

አሁን የሮኬቱን ምስል ከአዲሱ ንብርብር ትንሽ ወደ ላይ ማንቀሳቀስ ያስፈልግዎታል። ይህንን ለማድረግ በግራ ሜኑ ሁለተኛ አምድ ላይ የሚገኘውን የማንቀሳቀስ መሳሪያ እና በቁልፍ ሰሌዳው ላይ ያለውን የላይ ቀስት ለመጠቀም ምቹ ይሆናል።

አሁን የላይኛውን ምስል ጥቁር እና ነጭ ማድረግ አለብን። ይህ ከላይኛው ምናሌ ውስጥ "ማስተካከያ" - "Hue / Saturation" የሚለውን ንጥል በመጠቀም ሊከናወን ይችላል. ለሙሉ መሟጠጥ፣ የሳቹሬሽን ተንሸራታች ወደ -100 መቀናበር አለበት። ይህ እርምጃ በላዩ ላይ ሲያንዣብቡ የ"ላይ" ቁልፍ ከጥቁር እና ነጭ ወደ ቀለም የሚቀየርበትን ተፅእኖ ለመፍጠር ያስችልዎታል።

የመጨረሻው ንክኪ በሁለቱ ምስሎች ዙሪያ ያለውን ተጨማሪ ቦታ ማስወገድ ነው። ይህንን ለማድረግ በግራ ምናሌው ውስጥ "ሰብል" የሚለውን ንጥል ይምረጡ እናበአራት ማዕዘን ውስጥ ሁለት ሮኬቶችን ብቻ እንመርጣለን. መከርከም ለማከናወን አስገባ ቁልፍ ተጭኗል።

ውጤቱ ምንም ተጨማሪ ነፃ ቦታ የሌለበት ምስል ነው። እነዚህ መረጃዎች በሚቀጥለው ደረጃ ጠቃሚ ስለሚሆኑ የተገኘውን ምስል ስፋት እና ቁመት መፃፍ ያስፈልግዎታል።

በድር ጣቢያው ላይ እንዴት እንደሚሠራ አዝራር
በድር ጣቢያው ላይ እንዴት እንደሚሠራ አዝራር

ለመቆጠብ "ፋይል" - "አስቀምጥ" የሚለውን ጠቅ ማድረግ ያስፈልግዎታል በግራ አንቀጽ "የእኔ ኮምፒተር" የምስሉን ስም እንጽፋለን (የእንግሊዘኛ አቀማመጥ ብቻ), ቅርጸቱን ይምረጡ (በዚህ ውስጥ). መያዣ፣ PNG) እና "አዎ" የሚለውን ቁልፍ ጠቅ ያድርጉ።

ፋይል በ"ላይ" ቁልፍስክሪፕት

በዚህ ጉዳይ ላይ ስክሪፕት መፃፍ አያስፈልግም። በተጠናቀቀው ኮድ ላይ አንዳንድ ማሻሻያዎችን በማድረግ ይፋዊውን ስሪት መጠቀም ይቻል ይሆናል።

ይህን ለማድረግ ማንኛውንም የኮድ አርታዒ ማውረድ ያስፈልግዎታል። በጣም ታዋቂው እና ነፃው አማራጭ የማስታወሻ ደብተር++ ነው። እሱን ከጫኑ በኋላ ይህን ሁሉ ኮድ መቅዳት እና መለጠፍ አለብዎት፡

$(ሰነድ)።ዝግጁ(ተግባር(){$(መስኮት)።ማሸብለል(ተግባር () {if ($(this))።ማሸብለል() > 0) {$('scroller')።ፋdeIn ();} ሌላ {$('scroller')።fadeOut();}})፤ $('scroller') ጠቅ ያድርጉ(ተግባር () {$('አካል፣ html'))።animate({scrollTop: 0}፣ 400)፤ ሐሰት ይመለሱ፤}));

በመቀጠል በላይኛው ሜኑ ውስጥ "ፋይል" - "አስቀምጥ እንደ …" የሚለውን ይንኩ።ከዚያ በኋላ ኮዱን በ.js ቅርጸት እናስቀምጠዋለን። ከዚያ በኋላ የኤፍቲፒ ግንኙነትን በመጠቀም የስክሪፕት ፋይሎችን እና ምስሎችን ወደ እሱ በመስቀል ይህን ኮድ በጣቢያዎ ላይ መጠቀም ይችላሉ።

በጣቢያው ላይ ጫን

ለጣቢያው የማሸብለል አዝራሩን ለማዘጋጀት፣ ውስጥ ማስገባት ያስፈልግዎታልአስፈላጊ ቦታ ኮድ. ከመለያው በፊት ማስገባት አለብህ።

የአዝራር ዘይቤ መፍጠር በCSS

ብዙውን ጊዜ የጣቢያው "ላይ" የሚለው አዝራር ከታች ("ግርጌ") ላይ ይገኛል።

የሚከተለው ኮድ ወደ ጣቢያው style.css ፋይል መታከል አለበት፡

/የላይ አዝራር/

.scrollTop{

background:url('images/up.png') 0 0 አይደገምም፤/ቤተኛ ምስል ዱካ/

ስፋት:39px;/ አዝራር ስፋት/

ቁመት:96px;/50% የአዝራር ቁመት/

ታች:5 ፒክስል፤/የታች ንጣፍ በቋሚ ቦታ/

ግራ:89%;/ወደ ግራ shift/

}.ማሸብለል ወደላይ: ማንዣበብ{የጀርባ አቀማመጥ:0 -108px; } /የጀርባ ማካካሻ/"

በዚህ አጋጣሚ የምስሉ ስፋት እና ቁመት ዳታ ያስፈልጋሉ። የተቀበለውን ውሂብ ወደ ኮድ ለማስገባት ብቻ ይቀራል, እና ለጣቢያው "ላይ" አዝራር ዝግጁ ይሆናል! ሌላስ?

የላይ አዝራር ለ Wordpress ጣቢያ

በድር ጣቢያው ላይ እንዴት እንደሚሠራ አዝራር
በድር ጣቢያው ላይ እንዴት እንደሚሠራ አዝራር

ለዚህ ሲኤምኤስ የ"ላይ" ቁልፍ ተሰኪዎችን በመጠቀም እንዲሁም በተናጥል ሊሠራ ይችላል።

የፕለጊን ዘዴ በጣም ምቹ እና ለመጫን ቀላል ነው፣ ምክንያቱም የመጫኛ ቁልፍን ብቻ ጠቅ ማድረግ እና በተሰኪው ሜኑ ውስጥ ያሉትን ሁሉንም ተግባራት ማዋቀር ስለሚፈልግ።

የኋለኛው ምርጫ በጥንቃቄ መቅረብ አለበት ምክንያቱም በእሱ አማካኝነት ቫይረስ በጣቢያው ላይ ማግኘት ቀላል ይሆናል። በጣም ታዋቂው እና የተረጋገጠው አማራጭ ወደ ላይ ተመለስ ተብሎ የሚጠራ ተሰኪ ነው። የ Wordpress ፕለጊን መደበኛ ፍለጋን በመጠቀም ማውረድ ትችላለህ።

ይህ ቅጥያ አለው።በርካታ ተግባራት, እና ለ Wordpress ጣቢያ የ "ላይ" ቁልፍን ማበጀት በጣም ቀላል ይሆናል. ሁሉንም ዋጋዎች መለወጥ አስፈላጊ አይደለም ፣ የጣቢያው ገጽ ላይ ያለውን ገጽታ እና ቦታ ማዋቀር ብቻ ያስፈልግዎታል።

እንደምታየው የማሳያ ቁልፍን በተሰኪዎች ማዋቀር በጣም ቀላል ነው። ነገር ግን አንድ አስፈላጊ ልዩነት አለ, ይህም እያንዳንዱ የተጫነ ተሰኪ ሲኤምኤስን ይጭናል. ይህ የበይነመረብ ምንጭ ፍጥነት ላይ ተጽዕኖ ሊያሳድር ይችላል። ለዚያም ነው አብዛኛዎቹ የጣቢያ ባለቤቶች ሁሉንም ለውጦች በቀጥታ በኮዱ ውስጥ ለማድረግ የሚሞክሩት, እና በሶስተኛ ወገን ቅጥያዎች እገዛ አይደለም. ለኤችቲኤምኤል ጣቢያ የ"አፕ" ቁልፍ መስራት ትችላለህ፣ ይህም የሚበላውን ሃብት ይቀንሳል።

ሁሉንም የWordpress ስርዓት ፋይሎች ከመቀየርዎ በፊት ምትኬ ማስቀመጥ ያስፈልግዎታል። ከዚያ ከላይ የተገለጸውን የራስዎን ቁልፍ ለመፍጠር ሁሉንም ደረጃዎች መከተል ይችላሉ።

ቁልፍ "ላይ" ለJoomla

ለጆምላ 3 ድህረ ገጽ አፕ አዝራር
ለጆምላ 3 ድህረ ገጽ አፕ አዝራር

CMS Joomla እንደ Wordpress ያሉ ተሰኪዎችን መጫንም ይደግፋል። በJoomla 3 ላይ ላለው ጣቢያ በጣም የተሳካው የ"ላይ" አዝራር ስሪት የገጹ ከፍተኛ የሚባል ቅጥያ ነው።

በዚህ ሲኤምኤስ ማንኛውም ተሰኪ በ"ቅጥያ አስተዳዳሪ" በኩል መጫን ይቻላል። ለዚህም ያስፈልግዎታል፡

  • ፕለጊኑን በኢንተርኔት ላይ ያውርዱ፤
  • በቅጥያ አስተዳዳሪው ውስጥ ያለውን "አስስ" የሚለውን ቁልፍ ጠቅ ያድርጉ፤
  • የወረደውን ማህደር ይምረጡ፤
  • "አውርድ"ን ጠቅ ያድርጉ እና ይጫኑ።

አሁን በ"ፕለጊን አስተዳዳሪ" ውስጥ ማግበር አለቦት። ለዚህወደዚህ ክፍል መሄድ አለብህ ተሰኪውን አግኝ እና ሁኔታውን ወደ "ነቅቷል" ቀይር።

የሚቀጥለው እርምጃ የዚህን ፕለጊን "መሰረታዊ መለኪያዎች" በቀኝ በኩል ማግኘት የሚያስፈልግዎትን ክፍል በመጠቀም ሁሉንም የኤክስቴንሽን መለኪያዎች ማዋቀር ነው።

የገጹ አናት የሚከተለው ተግባር አለው፡

  • አሂድ/አስተዳዳሪ - አማራጩን በበይነ መረብ ግብአት ላይ ብቻ ሳይሆን በJoomla CMS ፓነል ውስጥም ጭምር ማንቃት።
  • የአዝራር መገለጥ ቦታ - የመውጫ ቁልፍ እንዲታይ ተጠቃሚው ስንት ፒክሰሎች ማሽከርከር እንዳለበት።
  • ጽሑፍን አስወግድ - በአዝራሩ ላይ የጽሑፍ መኖር።
  • ሁልጊዜ ከላይ - የጣቢያው ገጽ ሁል ጊዜ ከላይ ሆኖ ይታያል። በገጹ ላይ ወዳለ የተወሰነ ቦታ ለመሸብለል መልህቆችን ሲጠቀሙ ይህ አማራጭ መንቃት አያስፈልገውም።
  • ለስላሳ ማሸብለል - ገጹን ለስላሳ ማሸብለል ያደርገዋል።
  • የማሸብለል ቆይታ - ገጹ ሙሉ በሙሉ ወደ መጀመሪያው የሚሸጋገርበት ጊዜ።
  • የሸብልል ሽግግር - በማሸብለል ላይ ተጨማሪ የእይታ ውጤቶችን ይጨምራል።
  • የሽግግር ማቅለል - ወደ ገጹ አናት የሚደረገውን እንቅስቃሴ "እየዳከመ"።
  • አገናኝ አካባቢ - የአዶው መገኛ። በነባሪ፣ አዝራሩ የሚገኘው ከታች ቀኝ ጥግ ላይ ነው።
  • Staylesን ተጠቀም - የግለሰብ የአዝራር ዘይቤ፣ ይህም ከታች ባለው መስክ ሊዘጋጅ ይችላል። ወደ አሉታዊ እሴት ከተቀየረ ሁሉም የቅጥ ቅንጅቶች ከገጹ ገባሪ ጭብጥ ይወሰዳሉ።
  • አገናኝ ስታይል - የእርስዎን የአዝራር ዘይቤ ግቤቶች የሚያስገቡበት መስክ።

የ"ላይ" አዝራርን ዘይቤ ለማበጀት ቢያንስ በትንሹ ሊኖርህ ይገባል።CCS እውቀት. ያለበለዚያ የፔነልቲሜት መለኪያውን ዋጋ ወደ "አይ" መቀየር አለቦት።

ሌላው አስፈላጊ ነገር በአዶ ላይ ያለው የተለመደው ጽሑፍ የእንግሊዘኛ ጽሑፍ ይዟል፡ ወደላይ ተመለስ። እንዲህ ዓይነቱ ጽሑፍ በሩሲያኛ ቋንቋ ጣቢያ ላይ ሊገኝ አይችልም፣ ስለዚህ በቀላሉ በተሰኪው ግቤቶች ውስጥ ማሰናከል ወይም ወደ ሩሲያኛ መቀየር አለብዎት።

ይህን ጽሑፍ ለመቀየር ኤፍቲፒን ወይም በአስተናጋጁ ውስጥ የተሰራውን ፋይል አቀናባሪን በመጠቀም ወደ ጣቢያው አገልጋይ መሄድ ያስፈልግዎታል። በመቀጠል፣ በማውጫው "/አስተዳዳሪ/ቋንቋ/ኤን-ጂቢ/" ውስጥ "en-GB.plg_system_topofthepage.ini" የሚባል ፋይል ማግኘት አለቦት።

ጽሑፉን ከመቀየርዎ በፊት የዚህን ሰነድ ኢንኮዲንግ ወደ UTF-8 መቀየር አለብዎት። ይህ የሩስያ ፊደሎችን መደበኛ ማሳያ ያደርገዋል።

በቀጣይ የሚከተለውን መስመር እናገኛለን፡

" PLG_SYS_TOPOFTHEPAGE_GOTOTOP=" ወደላይ ተመለስ""

እና ሐረጉን በትዕምርተ ጥቅስ ወደ ራሽያኛ ይለውጡ። እንደ "ወደላይ!", "ወደ ላይ!" የመሳሰሉ ሀረጎችን መጠቀም ይችላሉ. ወይም "ላይ!"።

በመጨረሻ፣ የተሻሻለውን ፋይል ማስቀመጥ እና Joomla ላይ ለጣቢያው "ላይ" የሚለውን ቁልፍ ማረጋገጥ ያስፈልግዎታል።

የላይ አዝራር ለUcoz

ለድር ጣቢያ ወደ ላይ ያሸብልሉ
ለድር ጣቢያ ወደ ላይ ያሸብልሉ

የዚህ ሲኤምኤስ ተሰኪዎችን ማገናኘት ስለማይቻል በUcoz ላይ ያለው የ"ወደ ላይ" ቁልፍ የኮድ መርፌን በመጠቀም መደረግ አለበት። ሆኖም ይህ የስርዓት ፋይሎችን ረጅም ጥናት አይፈልግም እና አስፈላጊዎቹን መስመሮች ይፈልጉ ፣ ትንሽ ኮድ በትክክለኛው ቦታ ላይ መለጠፍ ብቻ ያስፈልግዎታል።

እኛን ለመጫንያስፈልጋል፡

  • ወደ "የቁጥጥር ፓነል -> ዲዛይን -> ዲዛይን አስተዳደር (አብነቶች) -> የጣቢያው ታች፤ ይሂዱ።
  • ስክሪፕቱን አስገባ (በፕሮጀክቱ ኦፊሴላዊ ድረ-ገጽ እና በሶስተኛ ወገን ምንጮች ላይ ሊገኝ ይችላል።

ማጠቃለያ

ከዛ በኋላ፣ አንድ አዶ ከታች በቀኝ ጥግ ላይ ይታያል፣ ተጠቃሚውን ወደ ገፁ አናት ያንቀሳቅሰዋል።

እንደምታየው ለማንኛውም ሲኤምኤስ የኋላ ቁልፍ ማዋቀር በጣም ከባድ አልነበረም። ሁለቱንም አውቶማቲክ የመጫኛ ዘዴ (ፕለጊን) እና በእጅ መጠቀም ይችላሉ. ነገር ግን፣ የመጨረሻው አማራጭ በጣም ተስማሚ ሆኖ ይቆያል፣ ምክንያቱም የጣቢያው አፈጻጸም ላይ አሉታዊ ተጽእኖ የለውም።

የጣቢያ ሀብቶችን ፍጆታ ለመቀነስ ለኤችቲኤምኤል ጣቢያ "ወደ ላይ ተመለስ" የሚለውን ቁልፍ መጠቀም ይችላሉ ምክንያቱም ብዙ ቁጥር ያላቸው ቅጥያዎች በንብረቱ አፈጻጸም ላይ አሉታዊ ተጽእኖ ያሳድራሉ. አንድ "ወደ ላይ" አዝራር ተሰኪ የጣቢያ ገጾችን የመጫኛ ጊዜ በእጅጉ ሊጎዳ አይችልም, ነገር ግን በአብዛኛው ተጠቃሚው በሲኤምኤስ ላይ ቢያንስ ደርዘን ፕለጊኖች ተጭኗል. በዚህ አጋጣሚ ማንኛውም ፕለጊን የገጹን ገፆች አፈጻጸም ላይ አሉታዊ ተጽዕኖ ሊያሳድር ይችላል።

የሚመከር: