我有一些jquery代码,可以让我的网页平滑滚动。
$(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() {
// 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;
}
.section {
border: 1px solid black;
background-color: #ededed;
height: 200px;
}
<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"></div>
<div class="section"></div>
<div class="section" id="last"></div>
<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;
if (!skip) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
}
});
});
$(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 .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;
}
<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"></div>
<div class="section"></div>
<div class="section" id="last"></div>
<a href="/my-web-page/" class="back-to-top">Back to Top</a>
所以现在这是固定的。
但第二个代码块产生了两个新问题:
带有片段标识符的链接(例如。, #section-of-page
)不再在浏览器地址栏中更新。例如,在一个页面中,单击时,页面确实会平滑地滚动到目标部分(因此它可以工作),但web地址保持不变 www.website.com/whatever
,它应该在何时更新到 www.website.com/whatever#section-of-page
.
带有片段标识符的链接不能跨页面工作。换句话说,, /this-web-page#section-of-page
很好。但是 /another-web-page#section-of-page
及 www.another-website.com/whatever#section-of-page
两者都失败(单击不执行任何操作)。
在添加第二个代码块之前,这些问题并不存在。
寻找一些关于如何解决这些问题的指导。
另外,如果您可以建议一种将所有函数集成到一个代码块中的方法,那就太好了。
最后,我了解css scroll-behavior
属性,但它仍然非常初级(无法调整任何设置),所以我现在宁愿使用js。
谢谢
2条答案
按热度按时间p8h8hvxi1#
你可以检查一下
href
通过创建内部位置来指向内部位置URL
对象并检查其host
反对window.location.host
. 然后打电话event.preventDefault
并仅在这种情况下执行平滑滚动。调用的回调函数(第三个参数)
$.animate
可用于在滚动效果后正确设置哈希。q9rjltbz2#
对于
1st
问题是因为event.preventDefault();
. 如果删除此行,则浏览器url将相应更新。如果发现任何问题,请在动画完成/结束后再次尝试设置url。
有关语法,请参阅文档
对于
2nd
问题通过放置调试点检查回调是否正在点击