如何解决在页内链接之间平滑滚动
对于长网页,我有一个“返回顶部”功能,当点击时,页面平滑地滚动回到顶部。
按钮看起来像这样,在页面的右下角:
代码如下:
$(document).ready(function() {
// browser window scroll position (in pixels) where the button will appear
var offset = 200,// duration of the animation (in ms)
scroll_top_duration = 700,// bind with the button
$back_to_top = $('.back-to-top');
// display and hide the button
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $back_to_top.addClass('make-visible-btt'): $back_to_top.removeClass('make-visible-btt');
});
//smooth scroll to top
$back_to_top.on('click',function(event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,},scroll_top_duration);
});
});
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: inline-block;
height: 40px;
width: 40px;
background: url(../images/back-to-top.png) no-repeat;
background-size: contain;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
border: 1px solid #aaa;
visibility: hidden;
opacity: 0;
transition: opacity .3s 0s,visibility 0s .3s;
}
.make-visible-btt {
visibility: visible;
opacity: 1;
transition: opacity 1s 0s,visibility 0s 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="/my-web-page/" class="back-to-top">Back to Top</a>
它工作正常。当用户向下滚动时,会出现箭头,单击时会平滑地将它们滚动回顶部。没问题。
问题在于页内链接。当用户点击任何这样的链接时:
<a href="/my-web-page/#section-3">text text text</a>
...页面只是以默认方式跳转到该部分。
到目前为止,这是我为页内链接平滑滚动所做的工作。
$(document).ready(function(){
$('a[href*="\\#"]').on('click',function(event){
var href = $(event.target).closest('a').attr('href'),skip = false;
for (i = 0; i < exceptions.length; i++) {
if (href.indexOf(exceptions[i]) > -1) {
skip = true;
}
}
if (!skip) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},500);
}
});
});
它不起作用。
如有任何建议,我们将不胜感激。
另外,如果我们可以将页内功能与主脚本结合起来,那就太好了。
谢谢。
解决方法
只需将 driver.find_element_by_css_selector("div.v-button.v-button-primary.primary").click()
应用到文档就不需要任何 JavaScript,因为它可以使所有锚链接平滑滚动。
每个MDN:
滚动框在用户代理定义的时间段内使用用户代理定义的计时函数以平滑的方式滚动。用户代理应遵循平台约定(如果有)。
要使“返回顶部”锚点滚动到顶部,只需将 scroll-behavior: smooth
设置为 href
。
#
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: inline-block;
height: 40px;
width: 40px;
background: url(../images/back-to-top.png) no-repeat;
background-size: contain;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
border: 1px solid #aaa;
visibility: hidden;
opacity: 0;
transition: opacity .3s 0s,visibility 0s .3s;
}
.make-visible-btt {
visibility: visible;
opacity: 1;
transition: opacity 1s 0s,visibility 0s 0s;
}
.section {
border: 1px solid black;
background-color: #ededed;
height: 200px;
}
html {
scroll-behavior: smooth;
}
要使原始 jQuery 代码正常工作,只需删除有问题的 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#last">jump to last section</a>
<div class="section"></div>
<div class="section"></div>
<div class="section" id="last"></div>
<a href="#" class="back-to-top make-visible-btt">Back to Top</a>
引用:
exceptions
$(document).ready(function() {
// browser window scroll position (in pixels) where the button will appear
var offset = 200,// duration of the animation (in ms)
scroll_top_duration = 700,// bind with the button
$back_to_top = $('.back-to-top');
// display and hide the button
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $back_to_top.addClass('make-visible-btt'): $back_to_top.removeClass('make-visible-btt');
});
//smooth scroll to top
$back_to_top.on('click',function(event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,},scroll_top_duration);
});
});
$(document).ready(function() {
$('a[href*="\\#"]').on('click',function(event) {
var href = $(event.target).closest('a').attr('href'),skip = false;
if (!skip) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
},500);
}
});
});
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: inline-block;
height: 40px;
width: 40px;
background: url(../images/back-to-top.png) no-repeat;
background-size: contain;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
border: 1px solid #aaa;
visibility: hidden;
opacity: 0;
transition: opacity .3s 0s,visibility 0s 0s;
}
.section {
border: 1px solid black;
background-color: #ededed;
height: 200px;
}