jquery - jQuery ScrollTop 在 iOS 上不起作用
问题描述
我有一个可在页面内滚动的 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>
解决方案
尝试在脚本的开头只放一个类
''' $(“.oneclass”) '''</p>
推荐阅读
- reactjs - react & highcharts:添加导航按钮
- c# - C# .NET Core 配置 - 替代方法?
- docker - 如何在 docker 中处理 ef 核心迁移?
- python - Smartsheet API 1006 错误 - 权限?参考?
- visual-studio-code - 在 vs 代码扩展视图中阻止多媒体内容
- data-structures - 单下堆操作与单上堆操作
- typescript - 如何将 Gatsby 与 TypeScript 和 Netlify 函数一起使用
- python - 尝试在 cpp scritp 中模仿 Python 中的 fsolve 函数以获得简单的函数
- python - 问题:如何在repli中用python生成新文件
- r - r 中的数据(county.fip)中不存在县 FIPS(即使在 VA 中!)