[js] 第16天 返回到顶部的方法有哪些？把其中一个方法出来

[haizhilin2013]

第16天 返回到顶部的方法有哪些？把其中一个方法出来

[linghucq1]

window.location.href += '#'

[qqdnnd]

window.scrollTo(0,0); //ie不支持，但好用
document.documentElement.scrollTop = 0;
location.href += '#';

[myprelude]

document.documentElement.scrollTop = 0;
location.href += '#';

[Konata9]

总结了前面几位老哥的答案，另外加了一个 a 标签的锚点方法。

1. 利用 a 标签的锚点。在顶部放一个 a 标签 <a name="top">顶部</a>，在需要回到顶部的位置放置一个 a 标签，地址为 top。 <a href="#top">回到顶部</a>。要做成隐藏的锚点，可以把内部的内容去掉，name 是必须的。

2. 利用 #，在 url 后增加 # 不会让页面刷新，并且可以回到顶部。可以对 location.href 进行设置 location.href += '#'。当这个方法执行多次即有多个 # 时，页面不会有响应。

3. 利用 javascript 设置 scrollTop = 0，一般设置在最外层，即 document.documentElement.scrollTop = 0 就可以返回顶部。

[Vi-jay]

 function backToTop() {
          if (parent.scrollTop <= 0) return;
          parent.scrollTop -= 30;
          requestAnimationFrame(backToTop)
        }

[NeverLoseYourWay]

1.通过锚链接回到顶部,需要将body加入一个名为top的标记:
回到顶部
2.通过JavaScript的scroll回到顶部,控制水平和垂直方向:
JavaScript回到顶部<s/a>

[NeverLoseYourWay]

<a href="#top" target="_self">回到顶部</a> <a href="javascript:scroll(0,0)">JavaScript回到顶部<s/a>

[15190408121]

前几天写的跳转页面后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之后直接出发参数定位到锚点

[censek]

• 方法 1⃣️

<a href="#">返回顶部</a>

• 方法 2⃣️

 <button @click="top()">返回顶部</button>

methods: {
    top() {
     document.documentElement.scrollTop = 0
    }
}

关于 document.documentElement 和 document.body

[blueRoach]

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()

[giggleCYT]

<button><a href="#">点我回顶部</a></button>

[Alex-Li2018]

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);
        }    
    });

带动画的写法

[smile-2008]

总结了前面几位老哥的答案，另外加了一个 a 标签的锚点方法。

利用 a 标签的锚点。在顶部放一个 a 标签 顶部，在需要回到顶部的位置放置一个 a 标签，地址为 top。 回到顶部。要做成隐藏的锚点，可以把内部的内容去掉，name 是必须的。

利用 #，在 url 后增加 # 不会让页面刷新，并且可以回到顶部。可以对 location.href 进行设置 location.href += '#'。当这个方法执行多次即有多个 # 时，页面不会有响应。

利用 javascript 设置 scrollTop = 0，一般设置在最外层，即 document.documentElement.scrollTop = 0 就可以返回顶部。

[378406712]

document.documentElement.scrollTop;

[HNHED]

document.documentElement.scrollTop

[amikly]

a标签的锚点

<!--  要做成隐藏的锚点，可以把内部的内容去掉，name 是必须的 -->
<a name="top">顶部</a>
<a href="#top" target="_self">回到顶部</a>

url 后增加

在 url 后增加 # 不会让页面刷新，并且可以回到顶部

<!--  可以对 location.href 进行设置 location.href += '#'。当这个方法执行多次即有多个 # 时，页面不会有响应 -->
<a href="#">返回顶部</a>

js设置 scrollTop = 0

<!--  一般设置在最外层即 document.documentElement.scrollTop = 0 就可以返回顶部 -->
<button @click="top()">返回顶部</button>
<script>
    function top(){
        document.documentElement.scrollTop = 0;
    }
</script>

[yxllovewq]

总结：

1. document.documentElement.scrollTop = 0
2. 锚点法，在顶部加个标签
3. url末尾加#，hash值可以为空
   加#的方法可以是：
4. <a href='#>top
5. 上面说到的location.href+=#，既然只能用一次为什么还这么写？下面这个写法可以一直使用。

function top() {
  location.href = /#$/.test(location.href) ? location.href : location.href + '#';
}

[xiaoqiangz]

利用 a 标签的锚点。在顶部放一个 a 标签 顶部，在需要回到顶部的位置放置一个 a 标签，地址为 top。 回到顶部。要做成隐藏的锚点，可以把内部的内容去掉，name 是必须的。（学习了）

利用 #，在 url 后增加 # 不会让页面刷新，并且可以回到顶部。可以对 location.href 进行设置 location.href += '#'。当这个方法执行多次即有多个 # 时，页面不会有响应。(学习了)

利用 javascript 设置 scrollTop = 0，一般设置在最外层，即 document.documentElement.scrollTop = 0 就可以返回顶部。

[WangXi01]

1. 使用#
2. document.documentElement.scrollTop = 0

[HoseaGuo]

还可以，利用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>

[never123450]

在 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 的基本功能，没有使用特定的库或框架。具体的实现方式可能因项目需求和使用的技术栈而有所不同。

[lili-0923]

锚点
document.documentElement.scrollTop = 0
返回顶部

[panpanxuebing]

document.documentElement.scrollTop = 0
// 或
scrollTo({
 top: 0,
 behavior: 'smooth'
})