我对 javascript 和一般编程非常陌生,并且试图使用 scrollIntoView() 函数无济于事。
我在移动 Android Chrome 和三星 Internet 中测试了以下代码,它工作正常,但在移动 IOS Chrome 和 Safari 中它没有
当我按下水平滚动菜单中的任何导航链接时,滚动条会一直移动到“帮助”链接的末尾,并且也会突出显示它。(它确实会转到正确的页面,请参见下面的图片示例)
scrollIntoView() 是否始终在 IOS(Iphone 6 版本及更高版本)中工作,或者我在使用它的方式上做错了什么?
HTML
<div id="navScroller" class="scrollmenu scroll example hide-on-desktop">
<a id="dairyy" class="btn2" href="https://www.gourmetdirect.co/collections/dairy">dairy</a>
</div>
CSS
.activeA {
//Places a red line underneath the link and makes the text white and bold.
border-bottom: 3px solid red;
font-weight: bold;
color: white;
}
Javascript
//Getting the url of the window
var url = window.location.href;
//Removing protocols
var urlNoProtocol = url.replace(/^https?\:\/\//i, "");
//if current page url is the same as the url of the specific product category page, set 'activeA' class which highlights the link
if ( urlNoProtocol == "www.gourmetdirect.co/collections/seafood") {
var element = document.getElementById("seafoodd");
function myFunction() {
var element = document.getElementById("seafoodd");
element.classList.remove("activeA");
element.classList.add("activeA");
element.scrollIntoViewIfNeeded();
};
myFunction();
}