मुझे इस कोड को वेनिला जेएस में बदलने में परेशानी हो रही है जो आईओएस 11, सफारी, क्रोम और एफएफ पर समान व्यवहार के साथ काम करता है। मेरे पास मुख्य समस्या है ऑफसेट यूनिट जो मुझे अनुभाग के केंद्र में स्क्रॉल करने में मदद कर रही है ताकि टेक्स्ट विंडो के बीच में प्रदर्शित हो।

$(document).on('click', 'a[href^="#"]', function (e) {
  e.preventDefault();
  var offsetUnit = $(window).height() * 0.5;
  $('html, body').scrollTop($($.attr(this, 'href')).offset().top+offsetUnit);
});
* {
  margin: 0;
  padding: 0;
}

section {
  height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

section > div {
  height: 100vh;
  width: 100%;
  flex: 1;
  background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
  <ul>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#treatments">Treatments</a>
    </li>
    <li>
      <a href="#prices">Prices</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

<section id="about"><div>About</div></section>
<section id="treatments"><div>Treatments</div></section>
<section id="prices"><div>Prices</div></section>
<section id="contact"><div>Contact</div></section>
वेनिला जेएस . में वर्तमान असफल प्रयास
function scrollPlease(element) {  
  const offsetUnit = (window.innerHeight + "px") * 0.5;
  window.scrollTo({
    'top': element.offsetTop + offsetUnit
  });
}

const link = document.querySelectorAll("[href='href_value']");
const section = document.querySelectorAll("section");

link.addEventListener('click', () => {
  scrollPlease(section);
});

https://codepen.io/2ne/pen/JmXPLB?editors=1010 - कोडपेन से लिंक करें

1
2ne 3 अक्टूबर 2018, 19:59

1 उत्तर

सबसे बढ़िया उत्तर

आप offsetUnit को एक स्ट्रिंग में परिवर्तित कर रहे हैं और फिर इसे एक संख्या के रूप में हेरफेर करने का प्रयास कर रहे हैं जो काम नहीं करेगा। इसके अतिरिक्त, आपको अपने ईवेंट श्रोताओं को प्रत्येक लिंक में संलग्न करने की आवश्यकता है (आप श्रोताओं को एक संग्रह में संलग्न नहीं कर सकते हैं जिस तरह से आप इसे jQuery के साथ करते हैं)। आप यह निर्दिष्ट नहीं कर रहे हैं कि आपके जेएस में स्क्रॉल करने के लिए कौन सा section है जिस तरह से आप jQuery मूल में हैं (इसके बजाय आप अपने फ़ंक्शन में सभी section तत्वों का संग्रह पास कर रहे हैं)। टिप्पणियों के साथ नीचे दिया गया सही उदाहरण (कार्य स्निपेट में स्वच्छ उदाहरण जो निम्नानुसार है):

const links = document.querySelectorAll('a[href^="#"]');
const offsetUnit = window.innerHeight * 0.5;

// the "elems" variable below and the commented loop in the listener code mimic the original jquery scroll positioning
// const elems = document.querySelectorAll('html, body');

for (let link of links) {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    let section = document.querySelector(e.currentTarget.getAttribute('href'));
    window.scrollTo(0, section.offsetTop + offsetUnit);

    // the loop below mimics the original jquery (same outcome as window.scrollTo above)
    // for (let elem of elems) {
    //   elem.scrollTop = section.offsetTop + offsetUnit;
    // }

  });
}
const links = document.querySelectorAll('a[href^="#"]');
const offsetUnit = window.innerHeight * 0.5;

for (let link of links) {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    let section = document.querySelector(e.currentTarget.getAttribute('href'));
    window.scrollTo(0, section.offsetTop + offsetUnit);
  });
}
* {
  margin: 0;
  padding: 0;
}

section {
  height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

section > div {
  height: 100vh;
  width: 100%;
  flex: 1;
  background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
}
<nav>
  <ul>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#treatments">Treatments</a>
    </li>
    <li>
      <a href="#prices">Prices</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

<section id="about">
  <div>About</div>
</section>
<section id="treatments">
  <div>Treatments</div>
</section>
<section id="prices">
  <div>Prices</div>
</section>
<section id="contact">
  <div>Contact</div>
</section>
2
benvc 29 अक्टूबर 2019, 17:47