मैं एक एंकर टैग पर क्लिक करने के प्रभाव को प्राप्त करने के लिए देख रहा हूं और यह पृष्ठ पर तत्व तक स्क्रॉल कर रहा है।
मेरे पास पहले से ही यह है jquery स्क्रॉल। इस तरह:
$.scrollTo( this.hash, 1500, {
easing:"easeInOutCubic",
"axis":"y"
});
हालाँकि, मुझे इसे संरेखित करने की आवश्यकता है ताकि दतत्व व्यूपोर्ट के निचले भाग पर बैठता है जब वह एनिमेट करना समाप्त कर देता है। पेज पर प्रत्येक अनुभाग एक अलग ऊंचाई है इसलिए मुझे तत्वों की स्थिति और ऊंचाई का अनुमान लगाने की आवश्यकता होगी।
मुझे यह पता लगाने में कठिनाई हो रही है कि इसे प्राप्त करने के लिए मुझे किन संख्याओं की गणना करने की आवश्यकता है।
संपादित करें
मैंने इसे अब बदल दिया है
var section = $(this.hash);
var scrollPos = $(section).offset().top + ( $(window).height() - $(section).height() );
$("html, body").scrollTop( scrollPos );
लेकिन यह अभी भी गलत है, "#about" अनुभाग अब व्यूपोर्ट के निचले भाग में संरेखित होने के बजाय क्लिक पर पृष्ठ को आधा कर देता है।
धन्यवाद
उत्तर:
उत्तर № 1 के लिए 6तत्व की ऊंचाई प्राप्त करें $ (तत्व) .height ()
व्यूपोर्ट की ऊँचाई प्राप्त करें $ (विंडो) .height ()
तत्व की शीर्ष स्थिति प्राप्त करें $ (तत्व) .offset ()। top
स्क्रॉल पृष्ठ से $ (तत्व) .offset ()। शीर्ष - ($ (विंडो) .height) () -। $ (तत्व) .height ())
उत्तर № 2 के लिए 1
इस तरह प्रयास करें:
var section = $(this.hash);
var scrollPos = section.offset().top + section.height() - $(window).height();
जवाब के लिए 0 № 3
उत्तर है यहाँ यह दिखाता है कि पृष्ठ को कैसे स्क्रॉल किया जाए ताकि चयनित तत्व विंडो के शीर्ष पर संरेखित हो।
इसे नीचे तक संरेखित करने के आपके अनुरोध के अनुसार, मैंने लिंक को पोस्ट से ठीक कर दिया है:
आपको मूल रूप से खिड़की की ऊंचाई को घटाना है, और तत्व की ऊंचाई निम्नानुसार है:
$("html, body").animate({
scrollTop: $("#wmd-input").offset().top - $("#wmd-input").height() - $(window).height()
}, 2000)
मेरे उदाहरण से # wmd-input तत्व इस पृष्ठ से उत्तर पाठ क्षेत्र है, अपने ब्राउज़र में डेवलपर कंसोल खोलें, कोड पेस्ट करें और इसे काम में देखें
(या कोई अन्य प्रश्न जहां आपके पास उत्तर क्षेत्र उपलब्ध है)