javascript - HTML5 响应式网站,需要在小屏幕上自动滚动以跳过导航

标签 javascript jquery html css media-queries

我的网站有导航栏。在移动屏幕上查看时,如果任何用户单击任何页面,都会弹出相同的标题,用户不会知道内容在标题下方。因此,我只需要在小屏幕上激活自动滚动功能。我搜索了很多网站,但找不到解决方案,比如我们如何将 JS 脚本与媒体查询一起使用。在此先感谢您的帮助。

我的 JS 文件中有如下代码,但这段代码会在所有屏幕尺寸上滚动

function pageScroll() 
{
window.scrollBy(0,1500); // horizontal and vertical scroll increments
}

html文件

<body onload="pageScroll">

但我想将其修改为仅适用于移动屏幕。

最佳答案

没有任何其他代码可以很好地了解您网站上发生的事情,您可以像这样在 jquery 中复制媒体查询

$("body").on("load",function() {
    if ($(window).width() < 768 ) { // mobile devices change it how you want

       window.scrollBy(0,1500); // horizontal and vertical scroll increments

    }
});

关于javascript - HTML5 响应式网站,需要在小屏幕上自动滚动以跳过导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46950597/

相关文章:

javascript - Javascript中的加权随机数生成

javascript - 动态增加和减少 jQuery slider 值

javascript - 取消绑定(bind) jQuery ajaxSuccess 事件

javascript - 创建一个下拉式菜单

c# - 如何对齐输入框旁边的按钮?

javascript - 将 JSON 中的值作为参数传递给表行上的函数单击

javascript - learnyounode node.js 教程的 console.log 打印语句顺序错误

javascript - jQuery 浮点 : Just pan when holding the Shift key

javascript函数没有返回正确的值

javascript - HTML5 Websockets 服务器要求