您可以简单地使用链接中的目标，例如#Someid，其中#Someid是div的id。

或者，您可以使用任意数量的滚动插件，使其更加优雅。

http://plugins.jquery.com/project/ScrollTo就是一个例子。

如果您不需要更改动画，那么您不需要使用任何特殊插件-我只是使用本机JavaScriptwindow.scrollTo()方法-传递0, 0将立即将页面滚动到左上角。

window.scrollTo(xCoord, yCoord);

参数范围

• xCoord是沿水平轴的像素。
• yCoord是沿垂直轴的像素。

你不需要jQuery来做到这一点。一个标准的超文本标记语言就足够了。

<div id="jump_to_me">blah blah blah</div>
<a target="#jump_to_me">Click Here To Destroy The World!</a>

如果你想平滑滚动，尝试这样做：

$("a[href='#top']").click(function() {$("html, body").animate({ scrollTop: 0 }, "slow");return false;});

这将采用任何href="#top"的<a>标签，并使其平滑滚动到顶部。

使用window.scrollTo(0, 0);非常快
所以我尝试了马克·乌尔西诺的例子，但在Chrome什么也没发生。我找到了这个

$('.showPeriodMsgPopup').click(function(){//window.scrollTo(0, 0);$('html').animate({scrollTop:0}, 'slow');//IE, FF$('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works$('.popupPeriod').fadeIn(1000, function(){setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);});});

测试了所有3个浏览器，它可以工作
我正在使用蓝图css
这是当客户端单击“立即预订”按钮并且没有选择租赁期限时，慢慢移动到日历所在的顶部并打开指向2个字段的对话框对话框，3秒后它会消失

试试这个

<script>$(window).scrollTop(100);</script>

所有这些建议都适用于各种情况。对于那些通过搜索找到此页面的人，也可以尝试这个。jQuery，无插件，滚动到元素。

$('html, body').animate({scrollTop: $("#elementID").offset().top}, 2000);

试试这个在上面滚动

<script>$(document).ready(function(){$(window).scrollTop(0);});</script>

$(document).scrollTop(0);也有效。

如果您想滚动到任何具有ID的元素，请尝试以下操作：

$('a[href^="#"]').bind('click.smoothscroll',function (e) {e.preventDefault();var target = this.hash;$target = $(target);$('html, body').stop().animate({'scrollTop': $target.offset().top}, 700, 'swing', function () {window.location.hash = target;});});``

非jQuery解决方案/纯JavaScript：

document.body.scrollTop = document.documentElement.scrollTop = 0;

您可以尝试在这个Fiddlehttp://jsfiddle.net/5bNmH/1/中使用JS

在页面页脚中添加“转到顶部”按钮：

<footer><hr /><p>Just some basic footer text.</p><!-- Go to top Button --><a href="#" class="go-top">Go Top</a></footer>

<script>
$("a[href='#top']").click(function() {$("html, body").animate({ scrollTop: 0 }, "slow");return false;});</script>

在html

<a href="#top">go top</a>

如果你不想平滑滚动，你可以欺骗并停止平滑滚动动画几乎只要你开始它…像这样：

   $(document).ready(function() {$("a[href='#top']").click(function() {$("html, body").animate({ scrollTop: 0 }, "1");$('html, body').stop(true, true);
//Anything else you want to do in the same action goes here
return false;});});

我不知道它是否被推荐/允许，但它有效：）

你什么时候会使用这个？我不确定，但也许当你想用一个点击来用JQuery动画一件事，但做另一个没有动画？即在页面顶部打开一个滑入管理登录面板，并立即跳到顶部查看它。

<script>$(function(){var scroll_pos=(0);$('html, body').animate({scrollTop:(scroll_pos)}, '2000');});</script>

编辑：

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

另一种方式使用顶部和左侧边距滚动：

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

真的很奇怪：这个问题已经活跃了五年了，仍然没有香草JavaScript答案来动画滚动……所以你来了：

var scrollToTop = window.setInterval(function() {var pos = window.pageYOffset;if ( pos > 0 ) {window.scrollTo( 0, pos - 20 ); // how far to scroll on each step} else {window.clearInterval( scrollToTop );}}, 16); // how fast to scroll (this equals roughly 60 fps)

如果您愿意，您可以将其包装在一个函数中并通过onclick属性调用它。检查这个jsfiddle

注意：这是一个非常基本的解决方案，可能不是最有效的解决方案。可以在此处找到一个非常详细的示例：https://github.com/cferdinandi/smooth-scroll

A很多的用户建议同时选择html和body标签以实现跨浏览器兼容性，如下所示：

$('html, body').animate({ scrollTop: 0 }, callback);

但如果您指望回调只运行一次，这可能会让您陷入困境。它实际上会运行两次，因为您选择了两个元素。

如果这对你来说是一个问题，你可以这样做：

function scrollToTop(callback) {if ($('html').scrollTop()) {$('html').animate({ scrollTop: 0 }, callback);return;}
$('body').animate({ scrollTop: 0 }, callback);}

这个工作的原因是在Chrome$('html').scrollTop()返回0，而不是在其他浏览器，如Firefox。

如果您不想等待动画完成，因为滚动条已经在顶部，请尝试以下操作：

function scrollToTop(callback) {if ($('html').scrollTop()) {$('html').animate({ scrollTop: 0 }, callback);return;}
if ($('body').scrollTop()) {$('body').animate({ scrollTop: 0 }, callback);return;}
callback();}

function scrolltop() {
var offset = 220;var duration = 500;
jQuery(window).scroll(function() {if (jQuery(this).scrollTop() > offset) {jQuery('#back-to-top').fadeIn(duration);} else {jQuery('#back-to-top').fadeOut(duration);}});
jQuery('#back-to-top').click(function(event) {event.preventDefault();jQuery('html, body').animate({scrollTop: 0}, duration);return false;});}

旧的#top可以做到这一点

document.location.href = "#top";

适用于FF、IE和Chrome

平滑滚动，纯JavaScript：

(function smoothscroll(){var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;if (currentScroll > 0) {window.requestAnimationFrame(smoothscroll);window.scrollTo (0,currentScroll - (currentScroll/5));}})();

你不需要JQuery。只需调用脚本

window.location = '#'

点击“转到顶部”按钮

示例演示：

PS：当你使用像angularjs这样的现代库时，不要使用这种方法。这可能会破坏URL哈希邦。

激活所有浏览器祝你好运

var process;var delay = 50; //milisecond scroll topvar scrollPixel = 20; //pixel U want to change after milisecond//Fix Undefine pageofset when using IE 8 below;function getPapeYOfSet() {var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;return yOfSet;}


function backToTop() {process = setInterval(function () {var yOfSet = getPapeYOfSet();if (yOfSet === 0) {clearInterval(process);} else {window.scrollBy(0, -scrollPixel);}}, delay);}

有趣的是，其中大多数根本不适合我，所以我用jQuery-ScrollTo.js：

wrapper.find(".jumpToTop").click(function() {$('#wrapper').ScrollTo({duration: 0,offsetTop: -1*$('#container').offset().top});});

$(document).scrollTop()返回了0，而这个实际上起作用了。

试试这个

<script>$(function(){$('a').click(function(){var href =$(this).attr("href");$('body, html').animate({scrollTop: $(href).offset().top}, 1000)});});</script>

为什么不使用JQuery内置函数scrollTop：

$('html, body').scrollTop(0);//For scrolling to top
$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

简短而简单！

用于滚动到页面顶部的元素和元素

WebElement tempElement=driver.findElement(By.cssSelector("input[value='Excel']"));
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", tempElement);

试试这个代码：

$('html, body').animate({scrollTop: $("div").offset().top}, time);

div=>要移动滚动的Dom元素。

时间=>毫秒，定义滚动的速度。

当顶部滚动小于限制底部和底部到顶部滚动标题是粘性的。下面参见小提琴示例。

var lastScroll = 0;
$(document).ready(function($) {
$(window).scroll(function(){
setTimeout(function() {var scroll = $(window).scrollTop();if (scroll > lastScroll) {
$("header").removeClass("menu-sticky");
}if (scroll == 0) {$("header").removeClass("menu-sticky");
}else if (scroll < lastScroll - 5) {

$("header").addClass("menu-sticky");
}lastScroll = scroll;},0);});});

https://jsfiddle.net/memdumusaib/d52xcLm3/

如果您想进行平滑滚动，请尝试以下操作：

$("a").click(function() {$("html, body").animate({ scrollTop: 0 }, "slow");return false;});

另一个解决方案是JavaScriptwindow.scrollTo方法：

 window.scrollTo(x-value, y-value);

参数：

• x值是沿水平轴的像素。
• y值是沿垂直轴的像素。

只需使用此脚本滚动到顶部直接。

<script>$(document).ready(function(){$("button").click(function(){($('body').scrollTop(0));});});</script>

以上所有答案都不适用于SharePoint 2016。

必须这样做：https://sharepoint.stackexchange.com/questions/195870/

var w = document.getElementById("s4-workspace");w.scrollTop = 0;

这将工作：

window.scrollTo(0, 0);

动机

这个简单的解决方案在本地工作，并实现平滑滚动到任何位置。

它避免了使用锚链接（那些#），在我看来，如果你想链接到一个部分是有用的，但在某些情况下不是那么舒服，特别是当指向顶部时，这可能导致两个不同的URL指向同一个位置（http://www.example.org和http://www.example.org/#）。

解决方案

在你想要滚动到的标签上放一个id，例如你的第一个部分，它回答了这个问题，但是id可以放在页面的任何地方。

<body><section id="top"><!-- your content --></section><div id="another"><!-- more content --></div>

然后作为一个按钮，您可以使用一个链接，只需使用这样的代码编辑onClick属性。

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

其中document.getElementById的参数是单击后要滚动到的标签的id。

平滑动画的更好解决方案：

// this changes the scrolling behavior to "smooth"window.scrollTo({ top: 0, behavior: 'smooth' });

参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

document.getElementById("elem").scrollIntoView();

只需尝试，无需其他插件/框架

document.getElementById("jarscroolbtn").addEventListener("click", jarscrollfunction);
function jarscrollfunction() {var body = document.body; // For Safarivar html = document.documentElement; // Chrome, Firefox, IE and Operabody.scrollTop = 0;html.scrollTop = 0;}

<button id="jarscroolbtn">Scroll contents</button> 

html, body {scroll-behavior: smooth;}

纯JavaScript解决方案：

function scrollToTop() {window.scrollTo({top: 0,behavior: 'smooth'});

我在coDepen上写了一个动画解决方案

此外，您可以尝试使用CSS#0属性的另一种解决方案。

html {scroll-behavior: smooth;}
@media (prefers-reduced-motion: reduce) {html {scroll-behavior: auto;}}

最短

location='#'

这个解决方案是pollirrata答案的改进，有一些缺点：没有平滑滚动和更改页面位置，但最短

平滑滚动和动画与香草javascript，没有jQuery

// Get the elementlet topBtn = document.querySelector(".top-btn");
// On Click, Scroll to the page's top, replace 'smooth' with 'auto' if you don't want smooth scrollingtopBtn.onclick = () => window.scrollTo({ top: 0, behavior: "smooth" });
// On scroll, Show/Hide the btn with animationwindow.onscroll = () => window.scrollY > 500 ? topBtn.style.opacity = 1 : topBtn.style.opacity = 0

body {background-color: #111;height: 5000px;}
.top-btn {all: unset;position: fixed;right: 20px;bottom: 20px;cursor: pointer;transform:scale(1.8);opacity: 0;transition: .3s;}

<button class="top-btn">🔝</button>

您可以使用JavaScript的内置函数scrollTo：

function scroll() {window.scrollTo({top: 0,behavior: 'smooth'});}

<button onclick="scroll">Scroll</button>

TypeScript中的等效解可能如下所示

   window.scroll({top: 0,left: 0,behavior: 'smooth'});

有不需要javascript，事件如果你想动画滚动动作！

css：

html {scroll-behavior: smooth;}

超文本标记语言：

<html><body><a id="top"></a><!-- your document --><a href="#top">Jump to top of page</a></body></html>

滚动到的一个简单示例（使用html更有效，但以下是如何使用JavaScript）：

const btn = document.querySelector('.btn');btn.addEventListener('click',()=>{window.scrollTo({left: 0,top: 0,})})window.addEventListener('scroll', function() {const scrollHeight = window.pageYOffset;if (scrollHeight > 500) {btn.classList.add('show-link');} else {btn.classList.remove('show-link');}});

.section {padding-bottom: 5rem;height: 90vh;}.btn {position: fixed;bottom: 3rem;right: 3rem;background: blue;width: 2rem;height: 2rem;color: #fff;visibility: hidden;z-index: -100;}.show-link {visibility: visible;z-index: 100;}
.title h2 {text-align: center;
}

    <section class="section"><div class="title"><h2>Section One</h2></div></section><section class="section"><div class="title"><h2>Section Two</h2></div></section><section  class="section"><div class="title"><h2>Section Three</h2></div></section><a class="btn"></a>

document.getElementsByTagName('html')[0].scrollIntoView({ behavior: "smooth" });

请检查下面的代码，肯定会有帮助。：）

document.querySelector('.sample-modal .popup-cta').scrollIntoView(true);document.querySelector('.sample-modal').style.scrollPadding = '50px'; //to move to the top when scrolled up.

滚动到动画页面的顶部：

window.scrollTo({ top: 0, behavior: 'smooth' });

使用AplineJS和TailwinCSS返回顶部：

<buttonx-cloakx-data="{scroll : false}"@scroll.window="document.documentElement.scrollTop > 20 ? scroll = true : scroll = false"x-show="scroll" @click="window.scrollTo({top: 0, behavior: 'smooth'})"type="button"data-mdb-ripple="true"data-mdb-ripple-color="light"class="fixed inline-block p-3 text-xs font-medium leading-tight text-white uppercase transition duration-150 ease-in-out bg-blue-600 rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg bottom-5 right-5"id="btn-back-to-top"x-transition.opacity><svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg></button>