当一个链接被点击时，除了使用的方法'scroll top‘之外，还有什么替代方法吗？
除了使用"scroll top"方法之外，还有以下几种替代方法：
- 使用JavaScript的
window.scrollTo()方法：该方法可以将页面滚动到指定的坐标位置。可以通过计算目标元素的位置，然后使用window.scrollTo()方法将页面滚动到该位置。 - 使用HTML的锚点链接：可以在目标位置设置一个锚点，然后通过在链接中添加锚点的名称来实现页面滚动到指定位置。例如，
<a href="#section2">Go to Section 2</a>，其中#section2是目标位置的锚点名称。 - 使用CSS的
scroll-behavior属性：该属性可以设置页面滚动的行为。通过将其设置为smooth，可以实现平滑滚动效果。例如，html { scroll-behavior: smooth; }。 - 使用jQuery插件：可以使用一些jQuery插件来实现页面滚动效果，例如
jQuery.scrollTo或jQuery.animate。 - 使用CSS动画：可以使用CSS动画来实现页面滚动效果。通过使用
@keyframes和animation属性，可以创建自定义的滚动动画效果。
这些方法可以根据具体需求和场景选择使用。在腾讯云的产品中，与页面滚动相关的产品包括云服务器、云函数、云存储等，可以根据具体需求选择适合的产品进行开发和部署。
相关·内容
1回答
Sapper: CSS平滑滚动锚链接对路由链接有不必要的影响
css、sapper
在Sapper应用程序中，当在给定页面(路由)内使用锚链接导航时，我使用CSS平滑滚动以获得更好的效果：
html {
scroll-behavior: smooth
}
但是，这会导致其他路由的导航以一种不想要的方式运行:而不是被重置到页面的顶部，滚动位置与前一条路径(在Firefox中)保持不变。(在Chrome中，同样的情况也是如此，但页面随后顺利地回滚到顶部。)
我知道这是因为Sapper是如何工作的，但是是否有一个已知的解决方案，允许使用CSS平滑滚动(用于锚链接)同时进行“按预期”的导航工作，并在加载时直接到达页面的顶部？
这里的实际例子是：。html { scroll-beh
浏览 1提问于2020-12-07得票数 1
回答已采纳
3回答
平滑滚动到纯Javascript位置
javascript、html、jquery、css、animation
如何创建一个完全像这样工作的纯Javascript函数？
$('html, body').animate({
scrollTop: y
}, 400);
这里，y是一个垂直位置的参数。在我现在工作的网站，有一个水平导航是固定在顶部，而滚动和自动聚焦相应的菜单项，当它滚动到映射的部分。此外，当单击菜单项时，主体容器应该自动滚动到该部分。我可以轻松地使用jQuery动画来做到这一点，但是客户机不想再使用jQuery了。
我已经研究了相当多的问题和答案，在这个网站上，window.requestAnimationFrame()或CSS转换效果。但我找不到一个完美的解决方案。
谢
浏览 10提问于2022-10-14得票数 0
2回答
如何使Chrome滚动到一个部分，包括一个自动滚动div？
javascript、html、google-chrome、scroll
我需要一个纯HTML解决方案滚动到我的页面上的一个部分。我通常这样做：
html {
scroll-behavior: smooth;
}
#section1 {
background: blue;
height: 500px;
}
#section2 {
background: red;
height: 500px;
}
<a href="#section2">Section 2</a>
<section id="section1"></section>
<section id=
浏览 1提问于2020-12-27得票数 0
回答已采纳
5回答
如何在没有动画的情况下滚动
javascript、jquery、html、css、scroll
因此，我使用了提供的优秀插件，它可以轻松地滚动到任何位置。我使用它主要是为了让用户在页面刷新时保持当前的滚动位置(不要问，我的是一个在某些情况下具有自动刷新功能的遗留游戏站点)。
因此，我将当前滚动位置存储到window.onBeforeUnload上本地存储中，并在页面加载后使用该值滚动到上一个位置。
$('content-grid').scrollTo(offsetBeforeReload);
这工作，但我想“跳”到该位置没有动画滚动。我不想使用锚点，因为我已经有了这个运行良好的scrollTo代码，我想做的就是去掉scrollTo动画，让它看起来就像是页面被“锚定”到了那
浏览 5提问于2016-01-12得票数 3
1回答
纯CSS平滑滚动到相同页面的锚式超链接，没有Javascript
css、scroll、css-transitions、transition、smooth-scrolling
在上有一个很好的过渡动画效果当点击一个字母链接，跳转到选定的锚文本有一个容易平滑的动画效果，使访问者下页。
使用Chrome，我无法看到他们使用的CSS转换效果。我想学习这一技术，并能够做一个CSS只有过渡效果，如果可能的话，只对相同的页面锚的垂直移动，最好不是动画在页面上的其他任何东西，只是垂直移动锚卷轴。
HTML
<article>
<!-- Hyperlink -->
<a href="#LetterE">Scroll Down to letter E</a>
<!-- Anchor further down t
浏览 10提问于2022-06-30得票数 0
2回答
无法在react-scroll scrollToTop中禁用平滑滚动
javascript、reactjs、smooth-scrolling、react-scroll
我使用react-scroll库来处理我的React应用程序上的滚动。我想滚动到顶部的时候，一个特定的按钮被点击，但我不希望它滚动顺畅，这似乎是默认启用。我已经尝试了下面的代码，但是页面仍然可以平滑地滚动，尽管持续时间成功地更改为2秒。我已经尝试了smooth属性的其他值，比如easeInQuart等，它们都工作得很好。我也尝试将false放在引号中，但无济于事。
<button onClick={() => animateScroll.scrollToTop({
duration: 2000,
smooth: false
})}>
</
浏览 2提问于2020-06-12得票数 0
1回答
平滑滚动到具有滚动行为的锚点，但高于100px
javascript、html、css、scroll
我试图在我的页面上做平滑的滚动效果，但我需要滚动100px以上，因为粘性标题。我不想在那里使用JQuery。我尝试添加伪类来阻止锚点，如下所示： div:target:before {
content: '';
display: block;
height: 100px;
margin-top: -100px;
visibility: hidden;
} 这不起作用，它覆盖了上面的积木。然后，我尝试按事件侦听器滚动它： window.addEventListener("hashchange", function () {
window.
浏览 18提问于2019-03-19得票数 0
5回答
我想实现一个简单的顶部和底部滚动按钮点击。卷轴在所有浏览器中都应该是平滑的。
规定-
我有两个按钮在页面上，在页面的顶部有一个名为 down 的按钮点击，它应该向下到页脚div。
页面底部还有一个名为“ up ”的按钮，点击该按钮将显示在屏幕上。
我尝试过一个解决方案，但在IE中，卷轴并不光滑。如何使滚动行为在所有浏览器中平滑。
目前，我已经在CSS中使用了滚动行为属性，但是它是一个良好的实践吗？有没有办法用JavaScript代替CSS呢？
html{
scroll-behavior: smooth;
}
注意:它也应该在IE中工作。
我非常感谢你的帮助。
代码的代码链接-
浏览 4提问于2020-12-15得票数 5
3回答
jQuery和链路锚点
jquery、css、anchor
你好，这是一个特殊的问题，我不知道jQuery是否可以帮助我，或者在这种情况下CSS是否足够。
我有一个从一个页面转到另一个页面的链接，指向一个链接锚：
<a title="Creazione Siti E-Commerce" href="http://mysite.com/it/servizi/#ecommerce">
转到页面/it/servizi/中的锚点链接
这里一切都很好。
我想要实现的是：
新页面将使用jQuery滚动动画滚动到锚点。因此，我应该能够告诉jQuery代码，当它在URL中找到像这样的锚点时，它将为滚动提供动画效果。
第二点是
浏览 0提问于2011-11-11得票数 1
1回答
与Vanilla JS一起从另一页平滑滚动
javascript、scroll、hyperlink、anchor、smooth-scrolling
我用香草js创建了一个平滑的卷轴。我让它可以在页面内滚动。但是，当从另一个页面出现时，它会转到# position目录，然后启动动画。我希望他们喜欢这样:当单击另一个页面中的锚链接时，页面首先显示顶部(window.pageYOffset)，然后移动到每个链接位置。
我用代码片段从if (urlHash) {}开始编写了这个事件
const anchors = document.querySelectorAll('a[href^="#"]');
const header = document.querySelector('header').o
浏览 1提问于2020-04-28得票数 1
2回答
从弹出窗口返回后重新加载并记住滚动位置
javascript、jquery、asp.net、dopostback
我有一个关于产品的页面，每个产品都有一个链接：“购买”。单击链接后，将显示一个弹出窗口，它将包含在另一个.aspx文件内。(弹出窗口由Colorbox插件生成)
在用户进行购买之后(单击发送到DB信息的按钮等等)：1.弹出窗口必须关闭自身。2.父页面必须重新加载。3.必须保持滚动位置。
问题是滚动位置没有被维护(特别是在IE浏览器中)。
我试过的: 1。
MaintainScrollPositionOnPostback="true" -- had no effect
和：
弹出页面：
<script>window.parent.callbackfromchild(
浏览 2提问于2013-08-15得票数 0
17回答
如何将HTML页面滚动到给定的锚点
javascript、jquery、html、scroll、anchor
我想让浏览器将页面滚动到给定的锚点，只需使用JavaScript即可。
我在HTML代码中指定了name或id属性：
<a name="anchorName">..</a>
或
<h1 id="anchorName2">..</h1>
我希望获得与您导航到http://server.com/path#anchorName相同的效果。应该滚动页面，使锚点位于页面可见部分的顶部附近。
浏览 6提问于2010-07-02得票数 288
回答已采纳
2回答
如何使用Html/Css添加动画向下滚动按钮？
html、css、css-animations
我试着制作一个平滑的滚动程序，它可以工作，但我想要一个动画按钮。
这是我的密码：
html {
scroll-behavior: smooth;
}
#section1 {
height: 800px;
background-color: red;
}
#section2 {
height: 800px;
background-color: blue;
}
<h1>Smooth Scroll</h1>
<div class="main" id="section1">
<h1>Sec
浏览 2提问于2021-08-26得票数 2
回答已采纳
2回答
为什么我的卷轴总是动画片？我怎么能立即到达顶峰呢？
javascript、html、jquery
所以我制作了这个动画网站，每次我在我的按钮上应用“回顶”代码时，它总是在整个页面上滚动，直到它到达顶部。
我希望它能立即把它们带到顶端，而不需要任何花哨的向上滚动效果，这就是我要得到的。
我尝试过多个脚本，它们都是出于某种原因获得动画的(即使我搜索的脚本代码应该不是动画的)。
这是我正在使用的当前脚本：(我尝试了多次，但它们都产生了相同的动画滚动效果)
<!-- Back to top -->
<script>
var btn = $('#BackTop');
$(window).scroll(function()
浏览 7提问于2022-10-06得票数 0
回答已采纳
4回答
如何平滑地滚动到纯JavaScript中的元素
javascript、smooth-scrolling
我想在不使用jQuery的情况下平滑地滚动到一个元素--只使用纯javascript。我希望一个通用的功能，能够顺利地向下滚动和向上滚动到文档中的特定位置。
我知道我可以在jQuery中使用以下内容：
$('html, body').animate({
scrollTop: $('#myelementid').offset().top
}, 500);
如果只用javascript我该怎么做呢？
这就是我想要做的：
function scrollToHalf(){
//what do I do?
}
function scrollToSecti
浏览 278提问于2018-08-05得票数 20
1回答
单击图像时添加平滑滚动效果
html、css、smooth-scrolling
我想添加一个平滑的滚动效果，当你点击一个图像。但是使用"scroll-behavior: smooth;“不能正常工作。当我将它添加到CSS中的"html“标签时，它也会在重新加载页面时平滑地向下滚动，而当我将它添加到任何其他标签时，它不会做任何事情。我该如何解决这个问题？
代码: HTML：
.scrolling-box {
scroll-behavior: smooth;
}
<div class="scrolling-box">
<section id="textimage4">
<h2&g
浏览 1提问于2020-08-10得票数 0
1回答
平滑滚动使用JavaScript向下滚动div时，向上滚动会变得不稳定且缓慢
javascript、html、css
我有一个简单的页面，我打算在右边放置一个大的表单，在左侧有一个导航菜单，允许用户跳到大表单的部分(这也可以用于大文章-现在模拟的大小，我已经添加了一个大的底部填充与CSS)。已使用height: 100vh设置了右侧柱的样式，以适合窗的高度。
当单击右侧的链接并且部分offsetTop大于其父链接的scrollTop时，滚动是平滑的。我使用JavaScript setTimeout，并使用循环设置超时间隔...这太棒了！然而，如果我想要向上滚动，因为部分的offsetTop小于其父部分的scrollTop，我就会遇到问题-它很笨拙，速度很慢，并且不能真正工作……我已经关注这个问题太久了，所以如
浏览 2提问于2018-08-05得票数 1
2回答
滚动到ID not not working？怎么啦？
html、scroll
我有一个问题与滚动功能在我的网站。
我有一个按钮，它应该滚动到我的页面上的特定ID，但按钮不工作。
我检查了我的代码几次，但看起来一切正常，仍然不能工作。
我的按钮代码如下：
<div class="home-description"><a class="buttons button2" title="Ecolee search engine details" href="#scroll">▼</a></div>
我的div ID代码如下：
<div class="ho
浏览 0提问于2020-08-10得票数 1
1回答
jquery锚效应不能正常工作。
menus、jquery、urls
我有以下脚本，它提供了锚效应：
// Smooth scrolling when clicking on a hash link
$('a[href*="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
if ($(window).width() > 1023) {
var $scrollT
浏览 0提问于2019-07-24得票数 0
回答已采纳
2回答
弹出式自动滚动体内容
jquery、magnific-popup
我在这个上安装了。
每次我点击一个缩略图启动灯箱，背景中的身体内容会稍微向下滚动。有什么办法能阻止这种事发生吗？
我感觉到lightbox脚本在某种程度上干扰了我的滚动到顶部代码：
// Magnific Popup open inline content
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true
});
// Magnific Popup open iframe content
$('.
浏览 3提问于2015-03-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
