Home/ Questions/Q 9120131
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T05:33:35+00:00

I’m working on a one-page website where the various content is located within different

  • 0

I’m working on a one-page website where the various content is located within different vertically expanding divs. When expanding a div, any already open div will automatically close, and I also want the page to be scrolled so that the particular content positions itself 90px from the top of the browser.

By using a simple anchor-link for each div, this works perfect most of the time. However, as the expanded content increases the height of the website, the anchor will sometimes calculate the ‘stopping-point’ incorrectly, and the user is scrolled to the wrong place. Especially when expanding a different div straight from an already opened one. I read in an other question that this is sometimes the case when using anchor links with unforeseen changes in the layout. Does anyone have an idea how to work around this? Is there perhaps a way of ‘absolutely’ scrolling the new content’s position relative to the top of the viewport? Or could one request the anchor to be a bit patient and wait for all the content to load before taking off?

Also, to prevent visitors on mobile and small screens from having to load the full-sized images, the jquery checks the visitor’s screen size and loads a corresponding html-file with the correct images into the #picswitend. Could this perhaps be a part of the problem?

Here’s the code for one of the expanding divs. It’s my first attempt at jQuery, so I guess it may be a bit unrefined, but it works.

CSS:

  .anchorlink {
  position:absolute;
  margin-top: -90px;
  }

Code in <head>:

  <head>
     <script>
        open = '';
        active = '';
        $(document).ready(function () {
        $('#closeinfo').hide();
        $('#closethis').hide();
        $('#faq').hide();
        $('#infomore').hide();
        $('#witsend').hide();
        });
     </script>
  </head>

Example of one of the expanding divs:

  <div class="text">
  <a name="witsendlink" class="anchorlink"></a>
  <a href="#witsendlink" id="witsend-show">
  <script>
     $("#witsend-show").click(function() {      
        $('#' + active).hide();
        $('#' + active + '-show').show();
        $('#infomore').slideUp(200);
        $('#witsend-show').hide();
        $('#witsend').show();
        active = "witsend";
    $('#closethis').show();
    $('#faq').hide();

    if($(this).width() <= 568){
       $("#picswitsend").load("witsendpicsm.html");
    } else {
       $("#picswitsend").load("witsendpics.html");
    }

    $('#witsendtitle').scrollToFixed({
       marginTop: $('#top').outerHeight() - 44,
       limit: function() {
          var limit = $('#lastwitsend').offset().top;
          return limit;
       },
          zIndex: 999,
       });      
        });
  </script>
  <div class="title">
     <p>Wits End Discography</p>
  </div>
  <div class="content">
     <p>Siste Sukk tapes & records is a small oslo-based independent label focusing on emo and hardcore, releasing most of their music on tape. When we made the cassette-cover for Wits End's latest release, we wanted to let an unconventional use of material play a major role in the design.
     </p>
  </div>
  </a>

  <div id="witsend">
  <div class="post">

     <div id="witsendtitle">
    <a href="#top" id="witsend-hide">
       <script>
          $('#witsend-hide').click(function () {
                 $('#witsend').hide();
         $('#witsend-show').show();
         $('#closethis').toggle();
         active = '';
      });
       </script>
       <p class="titletext">
          <p class="exit">&#10005;</p> Wits End Discography
       </p>
        </a>
     </div>

 <div class="content open">
    <p>
  <a href="http://www.sistesukk.com">Siste Sukk tapes & records</a> is a small oslo-based independent label focusing on emo and hardcore, releasing most of their music on tape. When we made the cassette-cover for Wits End's latest release, we wanted to let an unconventional use of material play a major role in the design. Basing the cover on a piece of folded newsprint and a and a small plastic bag, it pays respect to old school zine-culture while still keeping a sense of contemporariness and distinction in a scene heavily influenced by D.I.Y solutions.

  Memento mori!<br><br>In collaboration with <a href="http://www.martinmartin.no">Martin Asbj&oslash;rnsen</a>
        </p>
    <p class="small">2012 &middot; Commissioned &middot; <a id="perma" href="http://www.jonasersland.net/index.php?section=witsend#witsend">Permalink <span id="flag"> &#9873;</span></a>
        </p>
     </div>
  </div>        
  <div id="picswitsend">
  </div>                
  </div>
  </div>

I’m really thankful if anybody would care to give some thoughts on this, and I’m sorry if I included too little or unrelated information. Please feel free to ask if there’s anything, and I’d be thrilled to answer!

Have an absolutely brilliant day.

Edit: Here’s the site in action: http://www.jonasersland.net

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use the jQuery method scrollTop to “absolutely” scroll to 90px below the top of the browser – and you can animate it to boot so it eases in: http://api.jquery.com/scrollTop/. What you are trying to do will look like this:

    $("#linkTopAnchor").click(function() {
    $(this).blur();
    $("html, body").animate({scrollTop: "90px"}, "fast");
    return false;
});

    I am using $(this).blur(); because some mobile devices will automatically scroll to whatever is currently highlighted – so the page will scroll to where you want it and then jump back to the button that initiated event if you don’t manually deselect it. I have return false; in there to prevent the URL from changing to the hash-tag. In your case, you may want the URL to actually change, so you can simply remove that.

    • 0