Sometimes we need to implement smooth jump for hash link click, we can do it in many ways using javascript or jquery. There are lots of jquery plugins to do that, here I am trying to write simple jquery tricks that handles some specific situation to handle jump or hash link click or tracking.
My Target:
- Jump based on window hash url
- Hash link click for same page
- Hash based external link
#1 Jump based on window hash url
First case: if user is visiting with a hash url , so our duty is to help the user jump to the hash id
#2 & 3# Jump based on click
Second and third case is user click on any user, it can be simple hash link or a link with hash at end, So, only hash as link should be for same page, but any valid link with hash at end should be another page or external page.
All three cases are handled in below code sample, Marked the 3 situation in code using #
I covered the situation when there is hash link or hash in url but the hash id or html element doesn’t exists
Another thing to consider, while we move the user to the hash id/html element without moving to screen to that vertical point, it’s better to move 90-100 px less so that user can see the html element more clear, in terms of ux.
https://gist.github.com/manchumahara/fdf41174a6ed79321978db91b85f8779