CSS v. jQuery: Autoscroll Feature After Href Redirect
The Challenge: Four homepage icon cards must link to corresponding panel tabs on another page (About Us). The quirks are that the panel tabs’ anchors fit underneath the fixed navbar, obscuring the panel tab view.
Early Considerations: How can I href an entire div? How to trigger autoscroll on load of the new page to a position where the tabbed panels are viewable and below the fixed navbar?
Ruled Out: A Bootstrap provided CSS solution — as well as various StackOverflow suggestions — leverage pseudo elements to fit a white block above the targeted anchor. This is far from ideal as the layout would include an enormous whitespace, requiring another patch.
The Solution:
- First, let’s enable each icon card parent div to be clickable as an href (homepage). This col is nested underneath a parent container > row. Add an onClick attribute to the iconCard class.
2. Add a jQuery script on the linked page (About Us) to fire on page load to autoscroll to a location where the tabbed panel is viewable on device sizes tablets and up. In this case, I targeted the ID “leadText” in the section above the tabbed panel.
3. Test each href from the homepage on tablet and desktop (mobile view uses a carousel view for the tabbed panel and requires other functionality).
4. Raise your arms in triumph to notify your co-workers that you got this stupid behavior to work ;)
