వెబ్ పేజీల ద్వారా సర్ఫింగ్ చేస్తున్నప్పుడు, ఎలిమెంట్‌కి స్క్రోల్ చేయడం వల్ల వినియోగదారుని దృష్టిని ఎక్కువసేపు ఆకర్షిస్తుంది. వినియోగదారు ఒకే క్లిక్‌ని ఉపయోగించి స్క్రోల్ చేయవలసి వచ్చినప్పుడు లేదా ఆటోమేషన్ పరీక్ష విషయంలో, పేజీ దిగువన జోడించిన కంటెంట్‌ను తక్షణమే తనిఖీ చేయడానికి ఈ కార్యాచరణ వర్తించబడుతుంది. అటువంటి సందర్భాలలో, JavaScriptలోని మూలకానికి స్క్రోల్ చేయడం వలన ఎక్కువ వినియోగదారు పరస్పర చర్య లేకుండా ఒకే క్లిక్‌తో వర్తించే కార్యాచరణను జోడిస్తుంది మరియు సమయాన్ని ఆదా చేస్తుంది.
ఈ మాన్యువల్ JavaScriptను ఉపయోగించి మూలకానికి స్క్రోల్ చేయడానికి మీకు మార్గనిర్దేశం చేస్తుంది.
జావాస్క్రిప్ట్‌ని ఉపయోగించి మూలకానికి స్క్రోల్ చేయడం ఎలా?
జావాస్క్రిప్ట్‌ని ఉపయోగించి మూలకానికి స్క్రోల్ చేయడానికి, మీరు వీటిని ఉపయోగించవచ్చు:
-
- ' స్క్రోల్ఇంటో వ్యూ() ” పద్ధతి
- ' స్క్రోల్ () ” పద్ధతి
- ' స్క్రోల్టు() ” పద్ధతి
పేర్కొన్న విధానాలు ఒక్కొక్కటిగా వివరించబడతాయి!
విధానం 1: scrollIntoView() పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌లోని మూలకానికి స్క్రోల్ చేయండి
ది ' స్క్రోల్ఇంటో వ్యూ() ” పద్ధతి ఒక మూలకాన్ని డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM) యొక్క కనిపించే ప్రదేశంలోకి స్క్రోల్ చేస్తుంది. ఆన్‌క్లిక్ ఈవెంట్ సహాయంతో పేర్కొన్న HTMLని పొందడానికి మరియు నిర్దిష్ట పద్ధతిని దానికి వర్తింపజేయడానికి ఈ పద్ధతిని అన్వయించవచ్చు.
వాక్యనిర్మాణం
element.scrollIntoView ( సమలేఖనం )
ఇచ్చిన సింటాక్స్‌లో, “ సమలేఖనం ” సమలేఖనం రకాన్ని సూచిస్తుంది.
ఉదాహరణ
కింది ఉదాహరణలో, “ని ఉపయోగించి క్రింది శీర్షికను జోడించండి ”ట్యాగ్:
< h2 > మూలకానికి స్క్రోల్ చేయడానికి బటన్‌ను క్లిక్ చేయండి. h2 >
ఇప్పుడు, ''తో బటన్‌ను సృష్టించండి క్లిక్ చేయండి 'ఫంక్షన్‌ను ప్రేరేపించే ఈవెంట్' స్క్రోల్ ఎలిమెంట్() :
< br >
ఆ తర్వాత, స్క్రోల్ చేయడానికి ఇమేజ్ సోర్స్ మరియు దాని ఐడిని పేర్కొనండి:
చివరగా, '' అనే ఫంక్షన్‌ను నిర్వచించండి స్క్రోల్ ఎలిమెంట్() ” ఇది “ని ఉపయోగించి అవసరమైన మూలకాన్ని పొందుతుంది document.getElementById() ” పద్ధతి మరియు చిత్రాన్ని స్క్రోల్ చేయడానికి దానిపై scrollIntoView() పద్ధతిని వర్తింపజేయండి:
var మూలకం = document.getElementById ( 'డివి' ) ;
element.scrollIntoView ( ) ;
}
CSS కోడ్
CSS కోడ్‌లో, ఇమేజ్ ఐడిని సూచించడం ద్వారా చిత్ర పరిమాణాన్ని సర్దుబాటు చేయడానికి క్రింది కొలతలు వర్తించండి div ”:
#డివి{ఎత్తు: 800px;
వెడల్పు: 1200px;
ఓవర్‌ఫ్లో: ఆటో;
}
సంబంధిత అవుట్‌పుట్ ఇలా ఉంటుంది:
విధానం 2: window.scroll() పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌లోని మూలకానికి స్క్రోల్ చేయండి
ది ' window.scroll() ” పద్ధతి డాక్యుమెంట్‌లోని కోఆర్డినేట్ విలువల ప్రకారం విండోను స్క్రోల్ చేస్తుంది. ఇమేజ్ ఐడిని పొందేందుకు, ఫంక్షన్‌ని ఉపయోగించి దాని కోఆర్డినేట్‌లను సెట్ చేయడానికి మరియు పేర్కొన్న ఇమేజ్‌ని స్క్రోల్ చేయడానికి ఈ పద్ధతిని అమలు చేయవచ్చు.
వాక్యనిర్మాణం
విండో.స్క్రోల్ ( x-coord, y-coord )
పై వాక్యనిర్మాణంలో, “ x-coord ” X కోఆర్డినేట్‌లను సూచిస్తుంది మరియు “ y-cord ” Y కోఆర్డినేట్‌లను సూచిస్తుంది.
కింది ఉదాహరణ పేర్కొన్న భావనను వివరిస్తుంది.
ఉదాహరణ
హెడ్డింగ్‌ని జోడించడానికి, బటన్‌ను సృష్టించడానికి, ఆన్‌క్లిక్ ఈవెంట్‌ను వర్తింపజేయడానికి మరియు ఇమేజ్ సోర్స్‌ని దాని ఐడితో పేర్కొనడానికి అదే దశలను పునరావృతం చేయండి:
< h2 > మూలకానికి స్క్రోల్ చేయడానికి బటన్‌ను క్లిక్ చేయండి. h2 >< బటన్ క్లిక్ చేయండి = 'స్క్రోల్ ఎలిమెంట్()' > స్క్రోల్ ఎలిమెంట్ బటన్ >
< br >
< చిత్రం src = 'image.PNG' id = 'డివి' >
తరువాత, '' అనే ఫంక్షన్‌ను నిర్వచించండి స్క్రోల్ ఎలిమెంట్() ”. ఇక్కడ, మేము 'ని ఉపయోగించి అక్షాంశాలను సర్దుబాటు చేస్తాము. window.scroll() '' అనే ఫంక్షన్‌ని యాక్సెస్ చేయడం ద్వారా పద్ధతి స్థానం() ” మరియు పొందబడిన చిత్ర మూలకంపై దానిని వర్తింపజేయడం:
విండో.స్క్రోల్ ( 0 , స్థానం ( document.getElementById ( 'డివి' ) ) ) ;
}
ఆ తర్వాత, '' అనే ఫంక్షన్‌ను నిర్వచించండి స్థానం() ”ఒక వేరియబుల్ objని దాని వాదనగా తీసుకుంటుంది. అలాగే, వర్తించు “ ఆఫ్సెట్ పేరెంట్ ”ఆస్తి, ఇది స్థిరమైన స్థానం లేని సమీప పూర్వీకులను యాక్సెస్ చేస్తుంది మరియు దానిని తిరిగి ఇస్తుంది. అప్పుడు, '' సహాయంతో ప్రారంభించబడిన కరెంట్ టాప్ విలువను పెంచండి ఆఫ్‌సెట్‌టాప్ 'తల్లిదండ్రులకు (ఆఫ్సెట్ పేరెంట్) సంబంధించి అగ్రస్థానాన్ని తిరిగి ఇచ్చే ఆస్తి మరియు విలువను తిరిగి ఇస్తుంది ప్రస్తుత టాప్ ” జోడించిన షరతు నిజమని అంచనా వేయబడినప్పుడు:
ఎక్కడ కరెంటుటాప్ = 0 ;
ఉంటే ( obj.offsetParent ) {
చేయండి {
కరెంట్‌టాప్ += obj.offsetTop;
} అయితే ( ( obj = obj.offsetParent ) ) ;
తిరిగి [ కరెంట్ టాప్ ] ;
}
}
చివరగా, మీ అవసరాలకు అనుగుణంగా సృష్టించిన కంటైనర్‌ను స్టైల్ చేయండి:
ఎత్తు: 1000px;
వెడల్పు: 1000px;
ఓవర్‌ఫ్లో: ఆటో;
}
అవుట్‌పుట్
విధానం 3: స్క్రోల్‌టో() పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌లోని మూలకానికి స్క్రోల్ చేయండి
ది ' స్క్రోల్టు() ” పద్ధతి పేర్కొన్న పత్రాన్ని కేటాయించిన కోఆర్డినేట్‌లకు స్క్రోల్ చేస్తుంది. ఈ పద్ధతిని దాని ఐడిని ఉపయోగించి మరియు DOMపై నిర్దిష్ట చిత్రాన్ని స్క్రోల్ చేయడానికి అవసరమైన కార్యాచరణను అమలు చేయడం ద్వారా మూలకాన్ని పొందడానికి అదే విధంగా అమలు చేయవచ్చు.
వాక్యనిర్మాణం
window.scrollTo ( x మరియు y )
ఇక్కడ, ' x 'మరియు' వై ” x మరియు y కోఆర్డినేట్‌లను సూచించండి.
కింది ఉదాహరణను పరిశీలించండి.
ఉదాహరణ
ముందుగా, శీర్షిక, ఆన్‌క్లిక్ ఈవెంట్‌తో బటన్ మరియు చిత్రాన్ని జోడించడం కోసం పైన చర్చించిన దశలను ఈ క్రింది విధంగా పునరావృతం చేయండి:
< h2 > మూలకానికి స్క్రోల్ చేయడానికి బటన్‌ను క్లిక్ చేయండి. h2 >< బటన్ క్లిక్ చేయండి = 'స్క్రోల్ ఎలిమెంట్()' > స్క్రోల్ ఎలిమెంట్ బటన్ >
< br >
< img src = 'image.JPG' id = 'డివి' >
తరువాత, '' అనే ఫంక్షన్‌ను నిర్వచించండి స్క్రోల్ ఎలిమెంట్() ” మరియు స్క్రోల్‌టో() పద్ధతిలో స్థానం() పద్ధతిని ప్రారంభించడం ద్వారా స్క్రోల్‌ను సెట్ చేయండి:
window.scrollTo ( 0 , స్థానం ( document.getElementById ( 'డివి' ) ) ) ;
}
చివరగా, స్థానం() అనే పేరుతో ఒక ఫంక్షన్‌ను నిర్వచించండి మరియు పేర్కొన్న చిత్రం యొక్క కోఆర్డినేట్‌లను సెట్ చేయడానికి పైన చర్చించిన దశలను వర్తింపజేయండి:
ఎక్కడ కరెంటుటాప్ = 0 ;
ఉంటే ( obj.offsetParent ) {
చేయండి {
కరెంట్‌టాప్ += obj.offsetTop;
} అయితే ( ( obj = obj.offsetParent ) ) ;
తిరిగి [ కరెంట్ టాప్ ] ;
}
}
అవుట్‌పుట్
జావాస్క్రిప్ట్‌ని ఉపయోగించి మూలకానికి స్క్రోల్ చేయడానికి అన్ని అనుకూలమైన పద్ధతులను మేము చర్చించాము.
ముగింపు
జావాస్క్రిప్ట్‌లోని మూలకానికి స్క్రోల్ చేయడానికి, “ని ఉపయోగించండి స్క్రోల్ఇంటో వ్యూ() 'మూలకాన్ని యాక్సెస్ చేయడానికి మరియు పేర్కొన్న కార్యాచరణను వర్తింపజేయడానికి పద్ధతి, ' window.scroll() మూలకాన్ని పొందడం, ఫంక్షన్‌ని ఉపయోగించి దాని కోఆర్డినేట్‌లను సెట్ చేయడం మరియు చిత్రాన్ని స్క్రోల్ చేయడం లేదా 'ని ఉపయోగించడం' పద్ధతి స్క్రోల్టు() ”ఎలిమెంట్‌ను పొందేందుకు మరియు తదనుగుణంగా స్క్రోల్ చేయడానికి పద్ధతి. ఈ బ్లాగ్ జావాస్క్రిప్ట్‌ని ఉపయోగించి మూలకానికి స్క్రోల్ చేసే భావనను ప్రదర్శించింది.