Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

linghucq1

linghucq1 commented on May 8, 2019

@linghucq1
window.location.href += '#'
qqdnnd

qqdnnd commented on May 17, 2019

@qqdnnd

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

myprelude

myprelude commented on Jun 13, 2019

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

Konata9 commented on Jul 10, 2019

@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

Vi-jay commented on Jul 26, 2019

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

NeverLoseYourWay commented on Aug 31, 2019

@NeverLoseYourWay

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

NeverLoseYourWay

NeverLoseYourWay commented on Aug 31, 2019

@NeverLoseYourWay

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

15190408121

15190408121 commented on Sep 1, 2019

@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

censek commented on Oct 17, 2019

@censek
  • 方法 1⃣️
<a href="#">返回顶部</a>
  • 方法 2⃣️
 <button @click="top()">返回顶部</button>
methods: {
    top() {
     document.documentElement.scrollTop = 0
    }
}

关于 document.documentElement 和 document.body

blueRoach

blueRoach commented on Jun 2, 2020

@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

giggleCYT commented on Jun 20, 2020

@giggleCYT

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

Alex-Li2018

Alex-Li2018 commented on Aug 5, 2020

@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

smile-2008 commented on Sep 14, 2020

@smile-2008

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

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

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

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

378406712

378406712 commented on May 6, 2021

@378406712

document.documentElement.scrollTop;

9 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    jsJavaScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@never123450@xiaoqiangz

        Issue actions

          [js] 第16天 返回到顶部的方法有哪些?把其中一个方法出来 · Issue #52 · haizlin/fe-interview