scrollTo & js auto scroll & scrollX & scrollY

scrollX & scrollY

获取 scroll top height

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY

demo

https://codepen.io/xgqfrms/pen/MWKYxBb?editors=1011

https://stackoverflow.com/a/51133452/5934465

https://javascript.info/size-and-scroll-window

Window scroll

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTop

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

window.scrollTo(x-coord, y-coord)

window.scrollTo(options)

window.scroll(x-coord, y-coord)

window.scroll(options)

<button onClick="scroll(0, 100);">click to scroll down 100 pixels</button>

// options

window.scroll({

  top: 100,

  left: 100,

  behavior: 'smooth'

});

Element scroll

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo

https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll

element.scrollTo(x-coord, y-coord)

element.scrollTo(options)

element.scroll(x-coord, y-coord)

element.scroll(options) 

element.scrollTo(0, 1000);

// options

element.scrollTo({

  top: 100,

  left: 100,

  behavior: 'smooth'

});

ScrollToOptions

https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions

Window.scroll()

Window.scrollBy()

Window.scrollTo()

Element.scroll()

Element.scrollBy()

Element.scrollTo()

demo

form.addEventListener('submit', (e) => {

  e.preventDefault();

  var scrollOptions = {

    left: leftInput.value,

    top: topInput.value,

    behavior: scrollInput.checked ? 'smooth' : 'auto'

  }

  window.scrollTo(scrollOptions);

});

https://github.com/mdn/dom-examples/tree/master/scrolltooptions

https://mdn.github.io/dom-examples/scrolltooptions/

---

live demo

https://codepen.io/xgqfrms/pen/yLYLeKb?editors=1111

scroll calendar

scroll tab

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---

最新文章

1. linux 配置java 环境
2. js中的正则表达式
3. 《一课经济学》书摘笔记III
4. Sql例子Sp_ExecuteSql 带参数
5. js经验1
6. C# string的一些函数
7. 1.1.6-学习Opencv与MFC混合编程之---播放WAV音乐和 alpha融合功能
8. HDU 4873 ZCC Loves Intersection（可能性）
9. Node.js：EventEmitter
10. mysql HA-keepalived
11. （转）Eclipse快捷键 10个最有用的快捷键
12. 【2017集美大学1412软工实践_助教博客】团队作业7——Alpha冲刺之事后诸葛亮
13. Vue的土著指令和自定义指令
14. Linux 进程调度小结
15. 【译】《C# Tips -- Write Better C#》
16. 20145338 《网络对抗》 MSF基础应用
17. SQL Server Service Broker 示例（转）
18. ie9 css文件大小限制
19. 29.vector
20. Laravel 5.2+ 使用url()全局函数返回前一个页面的地址

热门文章

1. : cannot validate certificate for 127.0.0.1 because it doesn't contain any IP SANs
2. 3D运动类申明与实现
3. IntelliJ IDEA 20 岁了！20 年前的第 1 版曝光…
4. Django（orm）转
5. php小程序-文章发布系统
6. Flink-v1.12官方网站翻译-P005-Learn Flink: Hands-on Training
7. docker（6）镜像的使用
8. F - F(最小生成树)
9. hdu 6867 Tree 2020 Multi-University Training Contest 9 dfs+思维
10. 查找命令中grep，find，which和whereis的使用及区别