Fe-interview: [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]

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

带动画的写法

[MrZ2019]

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

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

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

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