Question

很抱歉，如果我缺少一些基本知识，我只是从JS开始。

当用户单击链接时，我具有使浏览器滚动到特定部分的功能：

package.json

然后，我有事件监听器将函数与链接关联。

 {
  "name": "devs_for_non_profit",
  "private": true,
  "engines": {
  "node": ">=6.0.0",
  "yarn": ">=0.25.2"
},
  "dependencies": {
  "@rails/webpacker": "3.5",
  "babel-preset-react": "~6.24.1",
  "prop-types": "~15.6.0",
  "react": "~15.4.2",
  "react-dom": "~15.4.2",
  "react-redux": "^5.0.7",
  "react-router": "3.2.0",
  "react-select-2": "^2.0.11",
  "redux": "^4.0.0",
  "redux-mock-store": "^1.5.3",
  "redux-thunk": "^2.3.0"
},
  "devDependencies": {
  "babel-jest": "^23.4.0",
  "jest-cli": "^21.2.1",
  "enzyme": "~2.9.1",
  "enzyme-adapter-react-15.4": "^1.0.6",
  "enzyme-adapter-react-16": "^1.5.0",
  "fetch-mock": "5",
  "isomorphic-fetch": "^2.2.1",
  "jasmine-ajax": "3.2.0",
  "jasmine-core": "~2.4.1",
  "jasmine-enzyme": "~3.4.0",
  "jest": "^23.6.0",
  "jest-fetch-mock": "^1.6.5",
  "karma": "~0.13.22",
  "karma-coverage": "0.5.5",
  "karma-jasmine": "~0.3.8",
  "karma-phantomjs-launcher": "~1.0.4",
  "karma-sourcemap-loader": "0.3.7",
  "karma-spec-reporter": "0.0.26",
  "karma-webpack": "2.0.1",
  "phantomjs-prebuilt": "~2.1.14",
  "react-addons-test-utils": "~15.6.2",
  "react-test-renderer": "^16.5.2",
  "webpack-cli": "^2.0.10",
  "webpack-dev-server": "^2.11.1"
},
  "scripts": {
   "start": "./bin/webpack-dev-server",
   "test-watch": "jest --watch",
   "test": "jest"
},
   "jest": {
     "automock": false,
     "roots": [
     "spec/javascript"
     ],
   "moduleDirectories": [
   "node_modules",
   "app/javascript"
  ]
 }
}

这在Chrome上可以完美运行，但是在FireFox（并假设是Safari）上，该行为很奇怪。当您单击链接时，它将执行该功能，因为执行“ console.log”行。完全不会滚动。

如果我在控制台上键入函数名称，它将滚动。

如果我疯了并开始单击链接，最终它将向下滚动。

非常感谢！

您可以在http://marccamprecios.com/kojima/kodata.html#

中找到它

Answer 1

问题是您有href="#"，该页面将您带到页面顶部，并且会干扰您的功能。

您可以使用：

<a href="javascript:void(0)">link</a>

Answer 2

根据我的评论，我无法在jsfiddle中的FF中重现该问题。

作为最初的问题排查，请确保在HTML文档的末尾包含此JS。

否则，您可以尝试：

添加preventDefault();
将scrollBy更改为scrollTo
摆脱左属性

function scrollToRegisterForm(event) {

event.preventDefault();

const registerIntro = document.getElementsByClassName("register-intro")[0];
const registerIntroTop = registerIntro.offsetTop - 20;

console.log(registerIntro);
console.log(registerIntroTop);

window.scrollTo({
  top: registerIntroTop,
  behavior:'smooth'
});

};

document.addEventListener("DOMContentLoaded", function() {
  var linkToRegister = document.getElementsByClassName("login-or-register__register")[0];
  linkToRegister.onclick = scrollToRegisterForm;
});

<a href="#" class="login-or-register__register">Register</a>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<h2 class="register-intro">REGISTER HEADER</h2>

Firefox非常奇怪的行为：onclick + scroll通过随机工作

2 个答案: