`

页面如何自动滚动到指定位置

阅读更多

转自:http://www.cnblogs.com/e241138/archive/2012/12/19/2825179.html

 

如何实现页面加载完成后自动滚动到指定的位置?

例如点击一篇博客,使页面的滚动条自动滚动到评论框所在的位置,这个功能只用一句代码就可以搞定:

window.location.hash

例如博客的地址是http://52java.sinaapp.com/e2#comm

注意到url后面带有#comm这个参数。当页面加载完毕后,浏览器就会自动滚动到dom对象id='comm'的位置。

 

附window.location的其他属性:

复制代码
hash        设置或获取 href 属性中在井号“#”后面的分段。
host        设置或获取 location 或 URL 的 hostname 和 port 号码。
hostname    设置或获取 location 或 URL 的主机名称部分。
href        设置或获取整个 URL 为字符串。
pathname   设置或获取对象指定的文件名或路径。
port         设置或获取与 URL 关联的端口号码。
protocol     设置或获取 URL 的协议部分。
search      设置或获取 href 属性中跟在问号后面的部分。        
复制代码
分享到:
评论

相关推荐

    elementUI滚动条,点击dom元素滚动到指定位置.pdf

    ElementUI 滚动条点击 DOM 元素滚动到指定位置的实现细节需要考虑多个方面,包括滚动条的状态、事件处理函数和动画效果。通过使用 ElementUI 的滚动条组件和 Vue.js 的 Composition API,我们可以快速实现滚动条的...

    HTML在页面上滚动滚轮滚动到指定的位置停.javascript_js跳转到页面指定位置

    HTML页面滚动到指定位置是网页交互中的常见需求,这通常涉及到JavaScript和HTML锚点的结合使用。本主题探讨如何在用户滚动滚轮时使页面在特定位置停止,并使用JavaScript进行平滑滚动到指定元素。 首先,HTML中的...

    jQuery实现将div的滚动条滚动到指定位置

    要实现将div的滚动条滚动到指定位置,我们可以使用jQuery的`animate()`方法。`animate()`方法允许我们创建平滑的动画效果,包括改变滚动位置。下面是一个简单的示例代码: ```html <!DOCTYPE html> <title>...

    react-ReactScrollTo一个React组件可以帮助滚动页面至指定位置

    总的来说,ReactScrollTo是一个实用的React组件,它简化了在React应用中实现页面滚动到指定位置的需求,并且可能支持自定义滚动条样式。开发者可以通过它来增强用户体验,创建更动态、更具交互性的网页应用。通过...

    微信小程序点击滚动到指定位置的实现

    在微信小程序开发中,有时候我们需要实现点击某个元素后页面自动滚动到指定位置的功能,例如在通讯录中点击字母导航时。由于微信小程序并不支持DOM操作,因此我们需要采用不同的方法来实现这一效果。本文将详细讲解...

    RecyclerView滚动指定条目并在页面中居中

    3. **滚动到指定位置**: 要滚动到指定位置,我们可以使用`LinearLayoutManager`的`scrollToPositionWithOffset`方法。但是,这个方法并不会自动居中显示条目,所以我们需要计算出适当的偏移量来使目标条目居中。以下...

    JS控制div跳转到指定的位置的几种解决方案总结

    当用户点击带有锚点的链接时,浏览器会自动滚动到对应标识符的位置。 这种方法的代码示例如下: ```html <a href="#div1">div1 <a href="#div2">div2 <a href="#div3">div3 <div id="div1">div1 ...

    屏幕滚动到相应位置,执行css动画

    通过媒体查询,我们可以判断用户是否已经滚动到特定的位置,例如,当页面的顶部距离窗口底部的距离达到某个值时,可以触发CSS动画。 CSS动画则是通过`@keyframes`规则定义元素从一种样式变换到另一种样式的整个过程...

    js将滚动条滚动到指定位置的简单实现方法

    在网页开发中,有时我们需要让页面的滚动条自动滚动到特定的位置,比如某个元素所在的位置,以引导用户关注或提供更好的浏览体验。本篇文章将详细讲解如何使用JavaScript实现这一功能。 首先,我们要明白滚动条滚动...

    layui问题之自动滚动二级iframe页面到指定位置的方法

    今天小编就为大家分享一篇layui问题之自动滚动二级iframe页面到指定位置的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    h5下拉刷新上拉加载滚动条位置

    如果他们在完成操作后返回原列表,理想情况下,页面应该自动滚动到他们离开时的位置,让用户能够无缝继续浏览。 3. **下拉刷新与上拉加载**:这两种交互模式是移动Web开发中的重要特性。下拉刷新通常用于更新当前...

    SCrollView自动滚动视图

    在本项目"SCrollView自动滚动视图"中,开发者旨在实现一个具备循环翻页效果的ScrollView,它能自动滚动并展示内容,这在很多应用的广告轮播或内容展示场景中非常实用。 首先,我们需要了解ScrollView的基本概念。...

    TS自定义滚动的解决方案

    例如,当用户滚动页面时,可以触发特定的回调函数: ```typescript window.addEventListener('scroll', (event) => { console.log('正在滚动'); // 在这里处理滚动相关的逻辑 }); ``` 三、CSS样式定制 为了...

    jQuery全屏页面滚动效果页面上下滚动效果代码jq插件

    // 平滑滚动到指定位置 $('html, body').animate({ scrollTop: targetOffset }, duration, easing); }); ``` 在这个过程中,可能还需要考虑一些额外的细节,如固定导航栏、响应式设计以适应不同设备,以及优化...

    微信小程序页面滚动到指定位置代码实例

    在微信小程序开发中,有时我们需要实现页面滚动到指定位置的功能,比如用户点击一个按钮后,页面自动滚动到某个特定的组件或元素。本教程将详细解释如何实现这一功能,并通过具体的代码实例进行演示。 首先,我们...

    js,jquery滚动/跳转页面到指定位置的实现思路

    在JavaScript和jQuery中,实现页面滚动到指定位置的需求可以通过多种方式来解决。本文将详细介绍如何使用锚点、隐藏锚点、ID以及jQuery的animate方法来完成这一任务。 首先,我们来回顾一下基本的锚点机制。锚点是...

    Vue列表如何实现滚动到指定位置样式改变效果

    在使用Vue.js框架开发Web应用时,经常需要实现列表滚动到指定位置并改变对应列表项样式的功能,特别是在聊天、通讯录、文档目录等场景下。本文将详细介绍如何在Vue项目中实现滚动到指定位置并改变样式的效果。 首先...

    通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位

    在Web开发过程中,有时候我们需要...综上所述,通过JQuery控制div滚动条滚动到指定位置的技术并不复杂,但要实现一个健壮、用户友好且兼容多种浏览器的自动定位功能,开发者需要对相关技术细节进行充分的测试和优化。

    纯css控制内容随滚动条滚动,可放任意位置

    当页面滚动时,具有固定定位的元素会保持在屏幕的同一位置,无论用户滚动到哪里。这在创建悬浮导航、侧边栏或如描述中提到的客服悬浮窗时非常有用。 要实现这样的效果,我们需要在CSS中为相应的元素设置`position`...

    jQuery全屏页面滚动导航切换效果

    - 平滑滚动:使用`$('html, body').animate({ scrollTop: targetOffset }, duration)`实现平滑滚动到指定位置。 4. **优化用户体验** - 添加触发动画:当用户点击导航链接时,可以添加动画效果,比如淡入淡出或...

Global site tag (gtag.js) - Google Analytics