-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Description
Describe the bug
When I uses a url with hash, e.g. blog.com/article/#title (generated by https://github.com/hexojs/hexo-renderer-markdown-it/#automatic-headline-ids) , I expect browser to open the link and jump to a position where the title is at top of the page. But the actual position is not.
System and Environment
The version and configuration of Hexo and Icarus.
- Hexo, OS, and node version (use
hexo versioncommand to view these information): hexo-cli: 4.3.0; os: linux 5.15.64-1-lts Arch Linux; node: 14.20.0 - Site configuration file
_config.yml - Theme configuration file
_config.icarus.ymlorthemes/icarus/_config.yml - Any additional theme configuration files (post front-matter,
_config.post.yml, or_config.page.yml) - Browser and version (e.g., Firefox 70.0, Chrome Android 80.0): Chrome 105.0.5195.102
To Reproduce
Steps to reproduce the behavior, such as:
- Open an incognito chrome window
- Paste https://ppoffice.github.io/hexo-theme-icarus/uncategorized/%E8%87%AA%E5%AE%9A%E4%B9%89hexo%E6%A0%87%E7%AD%BE%E6%8F%92%E4%BB%B6/#icon-1 in the new tab and press enter.
The position of the opened page sometimes does not end up at the desired hash position (though sometimes it works).
It's easier to reproduce if I scroll up and down the opened page a little bit, open a new tab, paste URL, and press enter again.
Expected behavior
A clear and concise description of what you expected to happen.
Additional context
I found that animation.js may have caused this issue. I made the following change on my own website:
diff --git c/source/js/animation.js w/source/js/animation.js
index 50c7c3f..064cfd9 100644
--- c/source/js/animation.js
+++ w/source/js/animation.js
@@ -16,8 +16,12 @@
$(selector).forEach(element => {
element.style.transition = '0s';
element.style.opacity = '0';
- element.style.transform = 'scale(0.8)';
- element.style.transformOrigin = 'center top';
+ if (!window.location.hash) {
+ element.style.transform = 'scale(0.8)';
+ element.style.transformOrigin = 'center top';
+ }
});
});
setTimeout(() => {Then I can get the expected behavior. However I don't understand the root cause.
