jQuery:如何在页面加载时滚动到某个锚点/div?

IT技术 javascript jquery
2021-01-18 11:02:44

最近我尝试更频繁地使用 jquery,现在我遇到了一些问题,我想用 jquery 解决,希望你能帮助我。

我有一些包含一些锚标记的网页(假设锚位于页面的中间)并且在加载事件时我希望页面从某个锚标记位置开始,这意味着页面将自动“滚动”到某个位置。

那是我以前的解决方案(这很丑陋,因为它在我的 url 中添加了 #i)

window.onload = window.location.hash = 'i';

无论如何,你能告诉我如何用 jquery 做到这一点吗?

注意:我不希望用户在到达此位置时感觉到任何滑动或效果

6个回答

使用以下简单示例

function scrollToElement(ele) {
    $(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left);
}

ele你的元素在哪里(jQuery)..例如:scrollToElement($('#myid'));

@Himu 它非常简单......它将滚动位置设置到您传入的元素的左上角......
2021-03-18 11:02:44
完美运行!!:) 只是为了这项运动,我想从其他人那里了解更多解决方案,尽管我现在很满意:)
2021-04-09 11:02:44

无需使用 jQuery,因为这是原生 JavaScript 功能

element.scrollIntoView()
这应该是正确答案,问题中的示例未使用 jQuery
2021-03-16 11:02:44
scrollIntoView 得到广泛支持(它是仅在 Firefox 中支持的 options 参数)
2021-03-23 11:02:44
scrollIntoView 不是发生在我身上的功能。
2021-03-24 11:02:44
@ReshapeMedia 我同意它最简单的答案-但请阅读问题->无论如何,您能告诉我如何使用 jquery 吗?
2021-04-02 11:02:44
基于文档,仅在 Firefox 中受支持
2021-04-14 11:02:44

我已经尝试了几个小时,阻止浏览器跳转到锚点而不是滚动到它的最简单方法是:使用另一个锚点(您不在网站上使用的 ID)。因此,不是链接到“http://#YourActualID”,而是链接到“http://#NoIDonYourSite”。噗,浏览器不会再跳转了。

然后只需检查是否设置了锚点(使用下面提供的脚本,从另一个线程中拉出!)。并设置您要滚动到的实际 ID。

$(document).ready(function(){


  $(window).load(function(){
    // Remove the # from the hash, as different browsers may or may not include it
    var hash = location.hash.replace('#','');

    if(hash != ''){

       // Clear the hash in the URL
       // location.hash = '';   // delete front "//" if you want to change the address bar
        $('html, body').animate({ scrollTop: $('#YourIDtoScrollTo').offset().top}, 1000);

       }
   });
});

有关工作示例,请参阅https://lightningsoul.com/media/article/coding/30/YOUTUBE-SOCKREAD-SCRIPT-FOR-MIRC#content

听起来不错。我建议为需要此功能的任何人实施您的更改。除了每个开发人员需要的可选延迟。;)
2021-03-15 11:02:44
为什么你有$(document).ready(function()AND $(window).load(function()
2021-03-20 11:02:44
@ChuckLeButt 如前所述,这已从另一个线程中拉出。我猜这是为了解决浏览器中的一些奇怪的错误。如果你想了解更多,这里有一个线程stackoverflow.com/questions/5182016/...
2021-03-29 11:02:44
这个解决方案对我来说很有吸引力,但我已经:a)将动画延迟从 1000 减少到 400;b)在 URL 地址栏中保持哈希不变,并且c)更改#YourIDtoScrollTo'+hash+'以滚动到我的网站提供的任何动态哈希并且用户导航到...
2021-04-13 11:02:44

我是这样实现的..

if(location.pathname == '/registration')
{
$('html, body').animate({ scrollTop: $('#registration').offset().top - 40}, 1000);
}

看看这个

将#value 附加到地址中是IE 等浏览器用来识别页面上命名锚点位置的默认行为,这是来自Netscape 的。

你可以截取它并删除它,阅读这篇文章。

这是一个动画版本...... OP 想要在没有动画的情况下做到这一点!
2021-03-17 11:02:44
OP 可以修改代码,这是帮助他朝着正确方向前进的功能示例。
2021-03-23 11:02:44