Remove :target styles on scroll

Question

I added the following to allow smooth scrolling for anchor links. The :target:before styles are to offset for a sticky header:

html {
    scroll-behavior: smooth;
}
:target:before {
    content:' ';
    display: block;
    height: 65px;
}

This works great, but it leaves a 65px gap if you scroll back up the page. I want to remove the :target:before styles once you scroll again.

I tried the following to no avail:

$(window).scroll(function() {
    $(':target:before').hide();
});

Any ideas on a good solution for this?

$('a').on('click', function() {
  var anchorLink = $('a').attr('href');
  $(anchorLink).addClass('activeAnchor');
  $(window).on('keyup DOMMouseScroll', function(e) {
    if( e.which == 33     // page up 
     || e.which == 34     // page dn 
     || e.which == 32     // spacebar
     || e.which == 38     // up 
     || e.which == 40     // down 
     || (e.ctrlKey && e.which == 36)     // ctrl + home 
     || (e.ctrlKey && e.which == 35)     // ctrl + end 
     || e.type == 'DOMMouseScroll' ) 
    {
    $(anchorLink).removeClass('activeAnchor');
    }
  });
});

header {
  position: fixed;
  height: 50px;
  background: #000;
  opacity: .75;
  color: #fff;
  width: 100%;
}

html {
  scroll-behavior: smooth;
}

.activeAnchor:before {
  content: ' ';
  display: block;
  height: 65px;
}

<!DOCTYPE html>
<html>

<body>
  <header>HEADER</header>
  <div style="padding-top:70px;">
    <h1>My First Heading</h1>
    <p><a href="#anchor" class="anchor">Anchor Link</a></p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <h2 id="anchor">Anchor.</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</html>

Can you please add a [Stack Snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) to better understand the issue? — rawnewdlz, Oct 29 '18 at 19:47

vrintle · Accepted Answer · 2018-11-04T05:26:10.747

Note that you can't select pseudo-elements using JavaScript or jQuery. Learn more

However, you can achieve the desired output by using CSS classes. For instance, you can use an inactive class:

:target.inactive:before {
  display: none;
}

Add the inactive class to :target elements whenever the user scrolls manually. And, remove it when the user clicks on any of the anchors.

$(window).on('DOMMouseScroll', function() {
  $(':target').addClass('inactive');
}); // a more effective event listener is provided in the code for *Manual Scroll*

$('a').on('click', function() {
  $(':target').removeClass('inactive');
});

The above trick will perform the same function as jQuery's .hide() function.

This had been tested out in Chrome v70 and Firefox Quantum v63 with successful results!

$(window).on('keyup DOMMouseScroll', function(e) {
  if( e.which == 33     // page up 
   || e.which == 34     // page dn 
   || e.which == 32     // spacebar
   || e.which == 38     // up 
   || e.which == 40     // down 
   || (e.ctrlKey && e.which == 36)     // ctrl + home 
   || (e.ctrlKey && e.which == 35)     // ctrl + end 
   || e.type == 'DOMMouseScroll' ) 
  {
    $(':target').addClass('inactive');
  }
});

$('a').on('click', function() {
  $(':target').removeClass('inactive');
});

header {
  position: fixed;
  height: 50px;
  background: #000;
  opacity: .75;
  color: #fff;
  width: 100%;
}

html {
  scroll-behavior: smooth;
}

:target:before {
  content: ' ';
  display: block;
  height: 65px;
}

:target.inactive:before {
  display: none;
}

<!DOCTYPE html>
<html>

<body>
  <header>HEADER</header>
  <div style="padding-top:70px;">
    <h1>My First Heading</h1>
    <p><a href="#anchor">Anchor Link</a></p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <h2 id="anchor">Anchor.</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</html>

Awesome! With a few minor updates this got me exactly where I was trying to go. Only issue I have found is it doesn't work in Firefox. Not too big of a deal though. — cameron, Nov 01 '18 at 12:12
@cameron thanks for the appreciation! Basically, it was due to the `mousewheel` event (not supported in FF). A handy solution would be to use `DOMMouseScroll` instead, I've updated my answer accordingly. — vrintle, Nov 01 '18 at 13:13

score 0 · Answer 2 · answered Oct 29 '18 at 22:34

Hope this helps. Using ":target" only works on the second click, so this might not be ideal. The below example may lead you to a solution with some further tweaking.

$('a[href^="#"]').on('click', function() {
  $('h2').addClass('youAreHere');
});


$(window).on('scroll', function() {
  var scrollUp = $(window).scrollTop();
  var rightHere = $('.youAreHere').length;
  var offTop = $('h2').offset().top;
  var offHgt = $('h2').height();

  if (scrollUp >= offTop + offHgt && rightHere) {
    $('h2').removeClass('youAreHere');
  }
});

/* Just for testing in SO snippet*/

body {
  min-height: 800px;
}

header {
  position: fixed;
  height: 50px;
  background: #000;
  opacity: .75;
  color: #fff;
  width: 100%;
}

html {
  scroll-behavior: smooth;
}

.youAreHere:target::before {
  content: ' ';
  display: block;
  height: 65px;
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>HEADER</header>
<div style="padding-top:70px;">
  <h1>My First Heading</h1>
  <p><a href="#anchor">Anchor Link 1</a></p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <h2 id="anchor">Anchor.</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

Thank you. Not exactly what I need. I have to be able to keep this generic and work for an entire site. So I won't know what the target item/ID may be. I want this to work for any anchor link on the website. I can't seem to find a good work around for this. Thanks for what you did though. — cameron, Oct 30 '18 at 19:38

score 0 · Answer 3 · answered Apr 20 '23 at 08:17

0

just stumbled on this, while searching for something different, but couldn't you just use:

html{
    scroll-behaviour: smooth;
    scroll-padding-top: 65px;
}

Seems like it would do the same thing, but without any javascript?

answered Apr 20 '23 at 08:17

Cryothic

771
7
18

score -1 · Answer 4 · answered Oct 31 '18 at 21:07

-1

Manually override the property:

$(window).scroll(function() {
  $(':target::before').css('height', '0px');
});

answered Oct 31 '18 at 21:07

rileyjsumner

523
1
8
21

Remove :target styles on scroll

4 Answers4