Open haizhilin2013 opened 5 years ago
window.location.href += '#'
window.scrollTo(0,0); //ie不支持,但好用 document.documentElement.scrollTop = 0; location.href += '#';
document.documentElement.scrollTop = 0;
location.href += '#';
总结了前面几位老哥的答案,另外加了一个 a 标签的锚点方法。
利用 a
标签的锚点。在顶部放一个 a
标签 <a name="top">顶部</a>
,在需要回到顶部的位置放置一个 a
标签,地址为 top
。 <a href="#top">回到顶部</a>
。要做成隐藏的锚点,可以把内部的内容去掉,name
是必须的。
利用 #
,在 url 后增加 #
不会让页面刷新,并且可以回到顶部。可以对 location.href
进行设置 location.href += '#'
。当这个方法执行多次即有多个 #
时,页面不会有响应。
利用 javascript
设置 scrollTop = 0
,一般设置在最外层,即 document.documentElement.scrollTop = 0
就可以返回顶部。
function backToTop() {
if (parent.scrollTop <= 0) return;
parent.scrollTop -= 30;
requestAnimationFrame(backToTop)
}
1.通过锚链接回到顶部,需要将body加入一个名为top的标记: 回到顶部 2.通过JavaScript的scroll回到顶部,控制水平和垂直方向: JavaScript回到顶部<s/a>
<a href="#top" target="_self">回到顶部</a> <a href="javascript:scroll(0,0)">JavaScript回到顶部<s/a>
前几天写的跳转页面后jquery的锚点方法
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}
var abouts = getUrlParam("about")
if (abouts == "about") {
$("html,body").animate({scrollTop:$("#about").offset().top},1000);
}
检测到参数about之后直接出发参数定位到锚点
方法 1⃣️
<a href="#">返回顶部</a>
方法 2⃣️
<button @click="top()">返回顶部</button>
methods: {
top() {
document.documentElement.scrollTop = 0
}
}
a标签设置属性href="#top" a标签的锚点,需要再顶部标签设置id
js window.scrollTo(0, 0) location.href += '#' document.documentElement。scrollTop = 0
var st = document.documentElement.scrollTop, speed = st / 10;
var funScroll = function () {
st -= speed;
if (st <= 0) {
st = 0;
}
window.scrollTo(0, st);
if (st > 0) {
setTimeout(funScroll, 10);
}
};
funScroll()
<button><a href="#">点我回顶部</a></button>
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
带动画的写法
总结了前面几位老哥的答案,另外加了一个 a 标签的锚点方法。
利用 a 标签的锚点。在顶部放一个 a 标签 顶部,在需要回到顶部的位置放置一个 a 标签,地址为 top。 回到顶部。要做成隐藏的锚点,可以把内部的内容去掉,name 是必须的。
利用 #,在 url 后增加 # 不会让页面刷新,并且可以回到顶部。可以对 location.href 进行设置 location.href += '#'。当这个方法执行多次即有多个 # 时,页面不会有响应。
利用 javascript 设置 scrollTop = 0,一般设置在最外层,即 document.documentElement.scrollTop = 0 就可以返回顶部。
document.documentElement.scrollTop;
document.documentElement.scrollTop
<!-- 要做成隐藏的锚点,可以把内部的内容去掉,name 是必须的 -->
<a name="top">顶部</a>
<a href="#top" target="_self">回到顶部</a>
在 url 后增加 #
不会让页面刷新,并且可以回到顶部
<!-- 可以对 location.href 进行设置 location.href += '#'。当这个方法执行多次即有多个 # 时,页面不会有响应 -->
<a href="#">返回顶部</a>
<!-- 一般设置在最外层即 document.documentElement.scrollTop = 0 就可以返回顶部 -->
<button @click="top()">返回顶部</button>
<script>
function top(){
document.documentElement.scrollTop = 0;
}
</script>
还可以,利用input的focus触发描点定位,搭配label。
<body>
<input type="radio" id="top-input" style="opacity: 0;position: absolute;z-index: -100;">
<label for="top-input" style="position: fixed;right: 10px;bottom: 10px;">点击回到顶部</label>
<div class="box" style="height: 3000px;"></div>
</body>
在 JavaScript 中,有几种常见的方法可以实现返回到页面顶部的效果。以下是其中一种方法的示例代码:
function scrollToTop() {
// 使用原生的 window.scrollTo() 方法将页面滚动到顶部
window.scrollTo({
top: 0,
behavior: 'smooth' // 可选,使用平滑滚动效果
});
}
在上述代码中, scrollToTop()
函数使用 window.scrollTo()
方法将页面滚动到顶部。 top
参数设置为 0,表示滚动到页面的顶部位置。 behavior
参数设置为 'smooth'
,可选择使用平滑滚动效果。
要触发返回到顶部的操作,可以将该函数与一个按钮的点击事件关联,例如:
当用户点击按钮时,页面将滚动到顶部位置。
请注意,上述代码是一种简单的实现方式,具体的实现方法可能因项目需求和使用的框架而有所不同。
除了使用 JavaScript 中的 window.scrollTo()
方法外,还可以使用 HTML 和 CSS 来实现滚动到顶部的效果。以下是一种基本的实现方式:
<a href="#top" class="scroll-to-top">返回顶部</a>
<!-- 在页面其他位置的任意位置添加一个具有 id "top" 的元素 -->
<div id="top"></div>
<style>
.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none; /* 初始状态下隐藏 */
}
/* 当页面滚动到一定位置时显示 "返回顶部" 按钮 */
.scroll-to-top.show {
display: block;
}
</style>
<script>
window.addEventListener('scroll', function() {
var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
var scrollToTopButton = document.querySelector('.scroll-to-top');
if (scrollPosition > 200) {
scrollToTopButton.classList.add('show');
} else {
scrollToTopButton.classList.remove('show');
}
});
</script>
在上述代码中,我们创建了一个带有 "返回顶部"
文本的链接,并将其放置在页面的底部右侧。然后,在页面的顶部位置添加了一个具有 id "top"
的元素。通过监听 scroll
事件,我们根据页面滚动的位置来切换 "返回顶部"
按钮的显示状态。
当页面滚动超过 200px 时,通过为按钮添加 .show
类来显示该按钮。点击该按钮将会自动滚动页面回到顶部。
请注意,这种方法仅使用了 HTML、CSS 和 JavaScript 的基本功能,没有使用特定的库或框架。具体的实现方式可能因项目需求和使用的技术栈而有所不同。
第16天 返回到顶部的方法有哪些?把其中一个方法出来