What I observed is probably hard to anticipate due to :target being an object with a pseudo-element that doesn’t actually exist prior to activating the link. It’s also possible that the behavior differs dependent on base or reset stylesheet(s) applied to your testing environment. The whole scenario is really an edge-case, as most times people will just want to set a heading as the link :target, and would arguably never see any undesirable artifacts.
#Smoothscroll with anchors how to#
Scroll Behavior The scroll-behavior CSS property tells the browser how to handle scrolling triggered by anchor links and such. I’ll also talk about when and why you might want to use a JavaScript version anyways. Today, I want to show you how to achieve the same effect with only CSS. When I did hand-coded sites, this was so easy. My most popular open source project is Smooth Scroll, a script that lets you animate scrolling with anchor links. It added it to the scroll to top button, but not my scroll to anchor buttons. The modification was quickly tested in Firefox (with default browser styles and an inherited display:block applied to the :target element). Why is having smooth scroll to anchor IDs so hard I added ' scroll-behavior: smooth ' as css but there's a weird pause/delay and it's not supported in all browsers. When applied directly to an inline heading :target, it’s not surprising that is should manifest much like the image you linked to demonstrates. The plugin HD Smooth Scroll, written in plain JavaScript, so it doesn’t require any external library to work. This is what the result should look like. Then you add at the end of this URL id, which is the one set to the menu anchor. There you will copy the URL of the page on which the Section is located.
It looks like I omitted that information from my original comment (oops). Yet another smooth scroll to anchor plugin to create custom table of contents, back to top button or general purpose smooth scrolling. You can easily access the Menu by following the path Dashboard-> Appearance-> Menus. The scrollTop() method is animated by enclosing it within the animate() method and defining the duration of the animation in milliseconds. That said, the issue I drew attention to – that my modification corrects – is prevalent when :target is a container such as The hash property is used to set or return the anchor part of the href attribute value.
#Smoothscroll with anchors code#
Without seeing the code in page context it’s difficult to diagnose. Well here’s a quick CSS snippet to create a lightweight, CSS based way to offset anchor links, and have them scroll smoothly: html while still reaching the intended ‘scrollto’ position (at 100px above the :target target). Don’t you hate it when you create an anchor link and it gets covered up by a fixed header? And isn’t it a bummer when the browser jumps to that link instantaneously all abrupt-like?
0 kommentar(er)
