Question

我有一个可在页面内滚动的div。单击按钮时，可滚动div应该将自身滚动到底部的窗体（而不滚动主体）。我的解决方案在台式机上运行良好，但是在iOS上根本无法运行。

如果有人知道解决方法，将非常感谢。我正在以缩小的jQuery 3.3.1运行此程序。

    $('.reveal .detail-contact .button').click(function(){
      $('.reveal').scrollTop($('form').offset().top);
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="reveal">
      <div class="reveal-container">

        <div class="detail-heading">
          <h3 class="detail-title"></h3>
          <div class="detail-social">
            <img src="/img/facebook-f.png" />
            <img src="/img/instagram-glyph.png" />
            <img src="/img/twitter-logo.png" />
          </div>
        </div>
        <p class="body-subheading">£$p>
        <p class="detail-description">
          
        </p>
        <div class="detail-contact ">
          <a class="contact-number contact-call" href="tel:+447971124144">
            <img src="/img/phone-icon.svg" />
            +44
          </a>
          <a class="button">
            CONTACT US
          </a>
        </div>
        <hr />
        <span class="minor-heading">KEY DETAILS</span>
        <div class="infographics columns is-tablet">
          <div class="column">
            <div class="infographic">
              <p class="minor-text">POWER</p>
              <p class="major-text"></p>
              <p class="minor-text">HP</p>
            </div>
          </div>
          <div class="column">
            <div class="infographic">
              <p class="minor-text">TORQUE</p>
              <p class="major-text"></p>
              <p class="minor-text">LB-FT</p>
            </div>
          </div>
          <div class="column">
            <div class="infographic">
              <p class="minor-text">0-62</p>
              <p class="major-text"></p>
              <p class="minor-text">SECONDS</p>
            </div>
          </div>
          <div class="column">
            <div class="infographic">
              <p class="minor-text">TOP SPEED</p>
              <p class="major-text"></p>
              <p class="minor-text">MPH</p>
            </div>
          </div>
        </div>
        <hr />
        <span class="minor-heading">VEHICLE SUMMARY</span>
        <div class="tech-specs">
          <div class="tech-spec">
            <span class="minor-text">Registration Year</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Body Colour</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Fuel Type</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Engine Size</span>
            <span class="minor-text">L</span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Gearbox</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Body Style</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Doors</span>
            <span class="minor-text"> Door</span>
          </div>
          <hr />
        </div>
        <span class="minor-heading">TECHNICAL SPECS</span>
        <div class="tech-specs">
          <div class="tech-spec">
            <span class="minor-text">Horsepower</span>
            <span class="minor-text"> BHP</span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">0-62 mph</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Drivetrain</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Top Speed</span>
            <span class="minor-text"> mph</span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Combined MPG</span>
            <span class="minor-text"> mpg</span>
          </div>
        </div>
      </div>
      <div class="contact-form" id="contact-form">
        <div class="reveal-container">
          <div class="detail-contact">
            <a class="contact-number contact-call" href="tel:+447971124144">
              <img src="/img/phone-icon.svg" />
              +44 7971 124144
            </a>
          </div>
          <h4>CAN WE HELP YOU?</h4>
          <p class="minor-text">
            If you have any questions about how we can help with this vehicle,
            please contact us via the form below.
          </p>
          <form method="post" id="enquiryForm">
            <div class="form-body">
              <label>
                <input type="text" id="firstName" required/>
                <div class="label-text">
                  First Name
                </div>
              </label>
              <label>
                <input type="text" id="lastName" required/>
                <div class="label-text">
                  Last Name
                </div>
              </label>
              <label>
                <input type="number" id="telNumber" required/>
                <div class="label-text">
                  Telephone Number
                </div>
              </label>
              <label>
                <input type="text" id="emailAddress" required/>
                <div class="label-text">
                  Email Address
                </div>
              </label>
              <label class="textarea-input">
                <textarea type="text" id="enquiryDetails" required>Enquiry regarding</textarea>
                <div class="label-text">
                  How can we help?
                </div>
              </label>
            </div>
            <div class="field is-grouped-centered consent">
              <div class="control">
                <label class="checkbox minor-text">
                  <input type="checkbox" class="consentCheck" required>
                </label>
              </div>
            </div>
            <button type="submit">Send Enquiry</button>
          </form>
        </div>
      </div>
    </div>
  </section>

Answer 1

尝试在脚本开始处仅放置一个类

‘’’ $（“。oneclass”） ‘’’

jQuery ScrollTop无法在iOS上运行

1 个答案: