如何使window.scrollTo(0,0)成为全局的？
要使window.scrollTo(0,0)成为全局的，可以通过以下步骤实现：
- 在前端开发中，可以将window.scrollTo(0,0)封装成一个全局函数，例如：
function scrollToTop() {
window.scrollTo(0, 0);
}- 将该函数定义在一个全局的JavaScript文件中，例如global.js，并在所有需要使用该函数的页面中引入该文件：
<script src="global.js"></script>- 确保在页面加载完成后调用该函数，可以通过以下方式实现：
window.onload = function() {
scrollToTop();
};- 如果使用了前端框架，如React、Vue等，可以将该函数定义在框架的全局配置中，以便在任何组件中都可以使用：
- React示例：
// 在index.js或App.js中定义全局函数
window.scrollToTop = function() {
window.scrollTo(0, 0);
};
// 在组件中使用
componentDidMount() {
window.scrollToTop();
}- Vue示例：
// 在main.js中定义全局函数
Vue.prototype.$scrollToTop = function() {
window.scrollTo(0, 0);
};
// 在组件中使用
mounted() {
this.$scrollToTop();
}通过以上步骤，就可以使window.scrollTo(0,0)成为全局可用的函数，无论在哪个页面或组件中都可以调用该函数实现滚动到页面顶部的效果。
注意：以上答案中没有提及具体的腾讯云产品和链接地址，因为该问题与云计算品牌商无关。
相关·内容
我使用了这段代码，但它没有工作，我需要一些关于如何在加载时将页面刷新到顶部的帮助。
window.addEventListener('load', function(){
window.scrollTo(0,0)
})
window.onload = (event) => {
window.scrollTo(0,0)
};
浏览 7提问于2022-01-29得票数 2
我目前正在使用这个脚本：
window.onbeforeunload=function(){window.scrollTo(0,0);}
编辑：我想在触发页面刷新时将页面滚动到顶部。问题是，当用户单击a href元素时，脚本也在工作/执行，该元素是来自表示下载服务器(托管在外部主机上)的子域的下载链接--假设是downloadserver.mydomain.com
<a href="xxx.mydomain.com/filetodownload.extension">
当用户单击具有特定子域的链接时，是否有可能排除触发？
谢谢。
浏览 4提问于2016-12-19得票数 0
回答已采纳
2回答
滑动时反作用引导旋转木马滚动顶
、、、、
当我滑到下一项或上一项时，我正试图弄清楚如何使我的反身传送带向上滚动。
这正是我需要它来工作的方式，但是我用另一种方式使用reactstrap节点模块完成了一些事情，而且我还不太了解如何使类似于window.scrollTo(0,0)的东西与下一个和以前的幻灯片按钮相关联。
下面是代码：
import React, { useState, Component } from 'react';
import fotos2 from '../data/fotos2'
import {
Carousel,
CarouselItem,
CarouselCon
浏览 6提问于2020-08-26得票数 0
错误：
console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Not implemented: window.scrollTo
at module.exports (/Users/me/Projects/my-project/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
at /Users/me/Projects/my-project/node_modules/jsdom/li
浏览 10提问于2019-08-01得票数 40
回答已采纳
我在每个组件渲染中都使用了window.scrollTo(0,0)来将组件渲染到顶部。但现在我试图让它成为全局的，而不是在每个应该从全局工作的组件中调用window.scrollTo(0,0)。
任何帮助都将不胜感激。谢谢。
我现在如何使用：-
component A {
render(){
window.scrollTo(0,0);
return(<></>);
}
component B {
render(){
window.scrollTo(0,0);
return(<></>);
}
类似地，我必须
浏览 32提问于2019-11-21得票数 0
1回答
我在“香草JS”中遇到了一个问题，在这个网站上被问到的形式略有不同，但是似乎没有一个香草javascript的答案？我希望页面在使用vanilla重新加载/刷新时出现在顶部(不使用scrollTop()将页面滚动回顶部)。
我已经核对了这些问题和相关的答案：
问题是有两个普通的JS答案分散在这些问题中，其中一个在IE/Edge中无效，另一个在Safari中无效
在Safari不起作用：
window.onbeforeunload = function () {
window.scrollTo(0,0);
};
在IE / Edge中不工作
history.scrollRestor
浏览 3提问于2018-08-20得票数 2
我正在使用svelte和svelte-routing创建一个网站，并尝试在用户导航时滚动到页面顶部。在像React这样的其他框架中，window.scrollTo(0，0)工作得非常好。不幸的是，在Svelte中，以下代码什么也不做： import { onMount } from "svelte";
onMount(() => window.scrollTo(0,0)); 那么，让它工作的诀窍是什么呢？
浏览 46提问于2019-10-10得票数 2
回答已采纳
1回答
我试图在自动化测试环境中向上滚动我的窗口，但这不起作用(控制台中也没有错误)：
public void ScrollToTheTop()
{
if (this.driver is RemoteWebDriver remoteDriver)
{
IJavaScriptExecutor jex = remoteDriver;
jex.ExecuteScript("window.scrollTo(0,0)");
}
}
现在，如果我尝试执行jex.ExecuteScript("alert('Something&#
浏览 0提问于2021-10-12得票数 1
3回答
我对rails使用了turbolinks；每当我单击一个链接时，页面都会向下滚动到上一页的滚动位置。我希望我所有的页面都加载，这样它就不会向下滚动(停留在页面顶部)。我不需要turbolinks来记住我以前的滚动位置。那么，如何强制页面加载时滚动位置在顶部(0,0)？
我试过了
$ ->
window.scrollTo 0,0
但我可能没有正确地绑定它。
浏览 1提问于2013-12-16得票数 1
1回答
我的问题是，在一个router.navigatedByUrl("")之后，我想再次滚动到顶部。
我尝试了以下所有方法都没有奏效的方法：
window.scroll(0,0);document.body.scrollTop = 0;document.querySelector('body').scrollTo(0,0);NbLayoutScrollService.scrollTo(0,0)；// Nebular for scrollingviewportScroller.scrollToPosition(0，0);document.querySelector().
浏览 6提问于2021-01-21得票数 0
我使用了onclick事件 scrolltoTop= async () => {
window.scrollTo(0,0)
} 但是转到顶端需要更多的时间，那么如何使用javascript进行顶端dyrect，如果它不被支持，那么如何快速滚动？
浏览 14提问于2021-11-17得票数 1
我为什么要犯这个错误？
在控制台中，我可以在错误处放置调试器并键入：
window
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
window.scrollTo(0,0)
TypeError: object is not a function
为什么我在这里出了差错？前几天一切都很顺利。
下面是代码：
(function ($) {
$(document).ready(function () {
$('#customer-info-sub
浏览 9提问于2014-06-20得票数 2
回答已采纳
1回答
我正在尝试创建一个简单的按钮链接，使用户返回一个历史页面，但也返回到该页面的顶部，而不是他们以前的位置。
我已经尝试了一些html/javascrpit来实现这一点，但是没有效果。有什么建议吗？
<a href="#" onClick="history.go(-1);return true;window.scrollTo(0,0);" class="btn home-button "> Back </a>
和/或
<a href="javascript:history.go(-1)" onclick
浏览 19提问于2019-07-19得票数 0
我想使用Javascript window.scrollTo (或只是滚动(0，0))来点击一个链接，并被带到页面的顶部。但据我所知，这个Javascript：
onclick="window.scrollTo(0,0)"
是POST请求吗？
因此，当我在表单(文本区域或输入)中输入某些内容时，在单击此window.scrollTo链接后，输入的值将消失：
有没有可能让这个Javascript成为GET，这样在点击顶部链接后表单字段就不会消失？
浏览 3提问于2016-08-11得票数 0
3回答
我有一个水平宽度为4000px的页面
如何创建一个事件，该事件在页面加载并从页面的最右侧向左侧循环时立即启动？我想要显示所有的内容，并让用户回到开始，如果你让我
理想情况下使用javascript编码，但可以接受CSS3 (如果可以的话)
谢谢你们，
DIM3NSION
根据您的回复，我已经尝试让它工作，但没有效果。非常感谢你的帮助
<script type='text/javascript'>
$(document).ready(function(){
function start(){
document.body.scrollTo(40
浏览 4提问于2012-04-21得票数 1
回答已采纳
1回答
我想弄清楚为什么onload事件从未被调用过。所有的构建都没有错误，类似的onLoad事件在不同的组件中工作。导出类工作扩展React.Component {
constructor(props) {
super(props);
this.state = {
allImgLoaded: false,
boxHovered: false,
projects: projects
}
this.handleWorkLoad = this.handleWorkLoad.bind(this);
}
componentWillMo
浏览 1提问于2017-05-17得票数 1
回答已采纳
我正在构建一个使用react implement.First的网站，我们将页面滚动到position.Then的底部或中部，然后单击iphone浏览器中的刷新按钮，然后奇怪地将页面滚动到永久位置。我尝试将flex布局更改为浮动布局，并添加页面显示事件侦听器设置scrollTop零
window.scrollTo(0,0)
.But页面仍然停留在safari手机的永久位置。
我猜问题是页面保存了最后一个视图的位置，但是当页面更新时，页面的内容不能完全显示，然后页面只能滚动到永久的position.At最后，页面的其余部分显示页面显示out.And页面显示事件在页面滚动到永久位置之前就已经
浏览 2提问于2017-06-02得票数 2
此函数应从页面顶部向下滚动到215像素以下，并增加延迟，以便第一个window.scrollTo事件发生在10ms，下一个事件发生在20ms，依此类推。
最后一行应该延迟2150毫秒，所以总共需要2秒。
相反，它会立即一次向下滚动215个像素。
function scrollDown() {
var yFinal=216, delay=0;
for (y=0; y<yFinal; y++) {
delay = delay+10
setTimeout(function() {
window.scrollTo(100,y);
},delay);
浏览 1提问于2012-12-08得票数 1
回答已采纳
2回答
我正在开发一个网站，根据用户单击的菜单图标加载不同的页面。我和一个朋友写了这个javascript函数：
function loadPage(targetURL){
$.get( targetURL, function( data ) {
document.getElementById("placeholder").innerHTML=data;
window.scrollTo(0,0);
});
}
菜单图标的编码方式如下：
<img src="images/some_icon.png" title="Some P
浏览 9提问于2013-09-20得票数 0
回答已采纳
我的问题是，href保留滚动位置，但我想让我的链接到页面的顶部，我目前的解决方案感觉不太干燥。
HTML：
<a href="" ng-click="goToPage()"></a>
联署材料：
app.controller("SomeController", function(..., $location) {
//this ends up being repeated in many controllers
$scope.goToPage = function() {
$location
浏览 1提问于2014-07-17得票数 1
回答已采纳
如何使用javascript在php中滚动到页面顶部
scroll(0,0); \\ this is not working?
在单击submit时，我调用一个函数来验证表单，如果出现错误，我将通过innerhtml设置错误消息，并且需要滚动到页面顶部而不提交。
Everything works...but its不会滚动到页面顶部
浏览 1提问于2010-01-10得票数 0
回答已采纳
我正在使用拉斐尔和流星，遇到了一个问题。我正在使用var paper = Raphael("paper", 800, 600);创建一个paper，如果我将这段代码放在一个呈现函数中，比如Template.board.rendered，我就可以很好地使用它。但是，这个模板中的文件变量显然不能被其他函数访问，即使我在模板中调用它们。我认为我可以通过在Meteor.startup中创建论文来解决这个问题，但我仍然有同样的问题。
例如，以下代码不起作用：
Pieces = new Meteor.Collection('pieces');
Meteor.startup
浏览 1提问于2013-03-13得票数 2
回答已采纳
这可能是一个愚蠢的问题。我想使用下面的javascript函数立即向下滚动到页面的底部，而不是顶部。您如何配置它才能做到这一点呢？脚本目前看起来是这样的：
<script>
function scrollWindow()
{
window.scrollTo(0,0);
}
</script>
脚本代码的预期结果是通过单击按钮向下滚动到底部，而不是滚动到顶部。
浏览 0提问于2019-11-10得票数 0
在网页上，如何让用户使用键盘上的特定按键点亮页面上的框/项？例如：我想让M点亮我的标题，当我再次按下M时，它会关闭吗？ 这就是我到目前为止所拥有的，但我觉得它可以清理很多。 $('#abutton').click(function() {
$('#abutton').removeClass('off').addClass('on');
$('#bbutton').removeClass('on').addClass('off');
$('#cbutt
浏览 13提问于2019-03-06得票数 0
我是tryng打开一个引导4选项卡后，页面加载。如果刷新页面，它确实有效，但如果我在站点内导航，则会得到查询选择器空错误。
这是我的代码，这基本上是我对这个的一个端口，因为我使用的是本机引导程序，所以我不得不用普通的Javascript重写它。
document.addEventListener("turbolinks:load", function() {
let url = location.href.replace(/\/$/, "");
if (location.hash) {
const hash = url.split
浏览 3提问于2020-05-16得票数 1
回答已采纳
我有一个关于以下环境的应用程序：
Monotouch 2.1
MonoDevelop 2.4.2
MacOS 10.6.8
iOS SDK4.3
迁移到iOS 5.0/5.1和Monotouch 5.2.10以及MonoDevelop 2.8.8.4下面的同一个应用程序存在以下问题:当我单击按钮在UIWebView中导航时，不工作。
代码是：(显然在Monotouch 2.1中是相同的)
public void ScrollToTop (object sender, EventArgs evt)
{
webView.EvaluateJavascript("
浏览 1提问于2012-04-10得票数 2
回答已采纳
我可能遗漏了一些东西，但我不能让window.scrollTo(0,0)移动到页面顶部。
我正在实现一个粘性的aside，它工作得足够好。它使用.getBoundingClientRect()来获取初始位置。
但是，如果页面被部分滚动，而我刷新了页面，它会读取错误的位置，并且定位在错误的位置。
我想我可以通过在开头执行window.scrollTo(0,0)来解决这个问题，这样页面就在顶部，aside就在正确的位置。
当我运行代码时，window.scrollTo(0,0)似乎没有任何区别。
让重新加载的窗口从顶部开始的正确方法是什么？
我已经在Mac上的Firefox上测试过了。Chrome
浏览 3提问于2017-09-15得票数 7
回答已采纳
2回答
所以我有一个I帧
<iframe onload='window.top.scrollTo(0,0);' scrolling='no' src='http://link.me/en/' />
在这个iframe上，我也想做广告
<iframe onload='resizeIframe(this)' scrolling='no' src='http://link.me/en/' />
我试过了：
<iframe onload='window.top.scrollTo
浏览 0提问于2019-01-30得票数 1
function showPointMarker (point, index, address, changeCenter, changeZoomLevel) {
if (changeCenter)
{
if (changeZoomLevel) {
// marker.setMap(map);
map = new google.maps.Map(
document.getElementById('map'), {
c
浏览 1提问于2013-03-04得票数 1
回答已采纳
早上好，这是唯一一个与我类似的问题，但不幸的是，它并没有帮助我找到答案，所以你的帮助是非常感谢的。
我有以下HTML代码片段：
<li class="first-page" ng-click="selectFirst()" onclick="window.scrollTo(0,0)">
First
</li>
我想调整<li>，以便它显示一个链接。在指令的链接函数中，我又包含了一个函数：
function getPaginationLink($location) {
var linkTo
浏览 0提问于2018-04-20得票数 0
回答已采纳
1回答
移动设备中如何滚动到页面顶部
、、、、
我在onLoad使用下面的代码转到页面顶部。window.scrollTo(0,0)在Javascript中适用于浏览器，但不适用于任何移动设备。
浏览 6提问于2016-01-28得票数 1
回答已采纳
我有一个代码，它将不断增长的页面滚动到底部(直到不可能滚动到底部)。
当不可能时，它滚动到顶部，javascript代码就完成了。
例如:想象一下facebook上的时间线。
这是一个不断增长的页面，所以我可以一次又一次地滚动，直到不可能滚动(然后我将出现在："BORN")。
这是我的密码：
while (i < elements.Count)
{
js.ExecuteScript("var timeId = setInterval( function() {
if(window.scrollY<(document.body.scroll
浏览 2提问于2013-08-13得票数 3
回答已采纳
2回答
有没有办法在使用react-static更改页面时滚动到顶部？我使用的是react-static默认包含的@reach/router。 我已经试过了： <Router onChange={window.scrollTo(0,0)}>
<Routes path="*"/>
</Router> ans这个(从这个issue) <Router history={history} autoScrollToTop={true}>
<Routes path="*"/>
</Router>
浏览 12提问于2020-04-24得票数 0
回答已采纳
当我的Angular应用程序中的某些页面被加载时，它们不在页面的顶部。
我尝试过在ng-view上使用autoscroll="true"，但是这不起作用。我相信这是因为在ng-view上面我有一个导航菜单，它有一些“复杂”的位置。
因此，我尝试在$routeChangeSuccess中使用$window.scrollTo(0,0);，但是它根本不起作用。
你知道会出什么问题吗？
.run(['$rootScope', '$route', '$window', function($rootScope, $route, $window
浏览 0提问于2016-12-18得票数 2
14回答
我已经找了几个小时了，现在还没有解决方案。我想要一个平滑的滚动到页面的顶部。我已经有了平滑的滚动，以分离锚与一个.js文件附加到我的网站，但我不能使用一个锚的顶部，因为我正在使用一个模板，从一个免费托管网站与内置的页面构建工具，不允许我编辑以上的主体区域。
我一直在尝试设置"smoothly-scroll-to-an-element-without-a-jquery-plugin“，但在无数次尝试之后，我显然不知道如何安排它。我也使用过window.scrollTo(0, 0);，但它可以立即滚动。谢谢！
此外： -代码可能是标记class="smoothScroll"
浏览 8提问于2013-04-11得票数 69
我目前使用的是Angular 6.1.5。当网站被路由到一个不同的页面时，我想让页面滚动回到顶部。我尝试使用{ scrollPositionRestoration: 'top' }，但它不起作用。
下面是我用app.routing.ts编写的代码。
export const routing = RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'top' });
有没有别的选择呢？我尝试将“top”更改为“enabled”，但效果不佳。我还尝试了window.scrollTo(0,0);，并
浏览 4提问于2019-03-29得票数 0
下面的函数存储要在线性回归图中使用的两个数组'a‘和'b’。调用该函数是为了在程序中的其他位置使用coords(0，0)检索坐标，因此列表不会更新，而只是返回。然后，当将坐标添加到每个列表时，调用coords(x，y)。然而，当它们被添加时，它们不会被存储，因为当调用coords(0，0)来检索更新的列表时，它只返回'a‘和'b’ X= 4,5 y= 9,10 coord(x，y)应该返回(0,1,2,3,4,5，5,6,7,8,9,10)。我想把它们存储起来，这样coords(0，0)就不会添加任何东西，但仍然返回(0,1,2,3,4,5，6,7,8,9,1
浏览 9提问于2020-01-27得票数 0
回答已采纳
下面有下面的代码。如果我一直向右滚动，然后重新加载页面，我希望(基于我的javascript代码)窗口能够一直向左滚动。然而，这种情况并没有发生。有人能告诉我吗？
<html>
<head>
<meta charset="utf-8">
</head>
<style>
#_1{
border: 1px solid blue;
width:1500px;
height: 400px;
}
</style>
<body>
<div id="_1">
浏览 4提问于2017-05-22得票数 0
回答已采纳
我有一个面板是打开的，但在IOS上，主体在面板后面滚动。 当面板打开时，我使用window.onscroll = function () { window.scrollTo(0, 0);来停止面板后面的页面滚动。 但是，我需要在事件处理程序中恢复正常的滚动。我可以使用什么javascript来恢复正常的滚动？目前，当面板关闭时，当您尝试滚动时，您将定位回窗口的(0,0)。 谢谢!
浏览 21提问于2019-02-22得票数 1
回答已采纳
我的应用程序中有一个列表页。当用户搜索任何单词时，列表将相应地显示出来！为了实现这一点，我使用了两个组件(比如搜索和列表)。找到搜索结果后，数组将传递给另一个组件(即列表组件)。
现在，滚动到顶按钮不在列表组件上。它在搜索组件上。我正在打电话给window.scrollTo(0,0)，但是什么都没有用！
以下是代码：
const scrollToTop = () => {
window.scrollTo(0,0)
}
return (
<div className={`!overflow-y-auto container bg-satin-3 r
浏览 9提问于2022-02-23得票数 1
我有一个定时器脚本，滚动向上和向下滚动和重新定位页面到顶部每10秒和向下每5秒。我的问题是我不能让它一直向下滚动。
<script language="JavaScript" type="text/javascript">
// Configure refresh interval (in seconds)
var refreshinterval=300
// Shall the coundown be displayed inside your status bar? Say "yes" or "no" belo
浏览 0提问于2010-07-08得票数 0
回答已采纳
我想让下面的代码更通用/独立于页面，这样我也可以在其他项目中使用它。
代码正在检查localCache中的某个值是否存在，以及location.pathname是否有特定的字符串。如果是这样，它应该滚动到顶部等。
现在看起来是这样的：
if (referrer == "home" && location.pathname == "projects"){
window.scrollTo(0,0);
localStorage.setItem('referrer', 'projects');
}
我想让它
浏览 3提问于2020-06-01得票数 0
回答已采纳
我正在建立一个反应的投资组合网站，我想有一个典型的网站的行为模仿。当我点击一个特定的项目时，我被路由到一个新的URL，然而，滚动条的位置仍然与“上一个”页面上的位置相同，除了第一次点击一个项目(如果我点击后退按钮并点击一个新的项目，滚动条在相同的位置)。我希望每次我点击一个项目时，窗口都会滚动到顶部。
class Project extends React.Component {
render() {
let project = this.props.project;
let linkTo = "/work/" + project.id;
浏览 0提问于2015-12-24得票数 0
我想做一个简单的window.scrollTo(0,0)按钮点击。我要它把窗户移到顶上。不幸的是，window.scrollTo(0,0)对GUI什么也不做。
我怀疑这与React和应用程序的结构有关。
scrollToTop: function() {
window.scrollTo(0, 0);
}
我是否必须用另一种方式去做反应，还是我错过了什么？
浏览 4提问于2015-01-28得票数 3
回答已采纳
我有一个简单的表单，包含几个必需的字段验证器和一个验证摘要控件。当我提交表单时，客户端验证将导致表单跳转到页面顶部。如果移除验证摘要，页面不会移动。
这里有一个简单的例子：
<asp:TextBox ID="test" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="testrequired" runat="server" ControlToValidate="test">*</asp:Requir
浏览 77提问于2009-03-30得票数 53
回答已采纳
我必须将window.scrollTo(0,0)调用放在哪个react组件中？
我尝试将其直接放入render中，也尝试了componentDidUpdate (等待所有呈现)，但是滚动条始终保持在相同的位置。
-编辑--
问题是窗口和正文的CSS高度/溢出。
请参阅：
浏览 2提问于2015-06-29得票数 20
回答已采纳
<a href="javascript:window.location.hash='today'; window.scrollTo(0,0);window.location.hash=''; document.getElementById('availability_view').scrollBy(300,0);">
其中availability_view是一个HTMLDIVElement。
控制台返回：
TypeError: '130' is not a function (evaluating &#
浏览 2提问于2011-07-26得票数 0
2回答
我正在为我的一页个人资料做这个个人项目，却找不到我正在寻找的结果。首先，我对JavaScript非常陌生，我在w3schools上发现了这些代码。
因此，回到问题，当我访问另一个选项卡时，如何使选项卡式页面回滚到顶部？
示例(参见下面的JSFiddle )：我将Tab 1滚动到底部，然后访问Tab 2，当我回到Tab 1时，它已经滚动回顶部。
请帮助:(
function btns(evt, btnName) {
var i, containerMain, tablinks;
containerMain = document.getElementsByClassName("c
浏览 5提问于2020-02-03得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
