Scroll when linked to id on same page

Question

Note: I'm new to webdev and i'm building this site with bootstrap

I'm building a one page site and the navbar at the top directs the user to the relevant id. the problem i'm having is that i want it to scroll to the id when clicked (see http://www.blastprocessor.co.uk/). I also want to set the class as active when the user scrolls past a specific id.

I have no idea where to start but i'll post my html code here.

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="34">
<div class="container">
<div class="navbar-collapse collapse navbar-responsive-collapse" id="main-menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#whatissm">What We Are</a></li>
<li class=""><a href="#whyusesm">Why Us</a></li>
<li class=""><a href="#whatdoessmeoffer">What We Offer</a></li>
<li class=""><a href="#contactus">Contact Us</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="#">Right Link</a></li>
</ul>
</div>
</div>
</nav>

Hi, this is all done through JavaScript (Jquery, since you got bootstrap already running) — Dorvalla, Oct 15 '14 at 09:06

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

Using JQuery:

See here to scroll and animate to your ID.

To add your class after scrolling past your ID use:

//assign the window and all the contents into variables
//instead of going and grabbing it from the DOM on every scroll

var $window = $(window),
    $content = $('.content');

$window.scroll(function () {
    $content.each(function () {
        //for each element that has a class of content
        //check its position and add SomeClass
        if ($window.scrollTop() >= $(this).position().top) {
            $(this).addClass('SomeClass');
        } else if ($window.scrollTop() <= $(this).position().top) {
            //if window position is less then remove it
            $(this).removeClass('SomeClass');
        }
    });
});

edited May 23 '17 at 12:11

Community

1
1

answered Oct 15 '14 at 09:06

ahb

128
11

Awesome!!!!! At the moment I want to make the scroll to stop 50px above the id, is there any way to do that? – Robert Crous Oct 15 '14 at 09:11
using your new code, not getting it to work. i made $target1 = $('#whyusesm'); and $target2 = $('#whybutton'); as the id for the – Robert Crous Oct 15 '14 at 09:30
What do you mean one active class? Can you give me more details – ahb Oct 15 '14 at 10:19
only the first section is highlighted yellow.... none of the others are... so as you scroll it doesn't update it as you scroll down.... i was thinking of fixing this with another variable $activescroll but haven't been able to solve it yet. – Robert Crous Oct 15 '14 at 12:31
@RobertCrous I have updated the answer to do this. See here http://jsfiddle.net/stvs730h/5/ – ahb Oct 15 '14 at 13:12

Benjamin · Answer 2 · 2014-10-15T09:53:00.157

0

You can use the following function to make your scroll animation. Regarding adding a class 'active' to the past id actually you can follow the answer of @ahb. For your need i just added a var reduce in the function which will help you reduce 50px from the actuall offset.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
  var reduce = 50;
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - reduce
        }, 1000);
        return false;
      }
    }
  });
});

ORIGINAL SOURCE

DEMO

edited Oct 15 '14 at 09:53

answered Oct 15 '14 at 09:16

Benjamin

2,452
2
15
30

im using this code for scrolling: $(function() { $('[data-toggle="popover"]').popover(); $('[title]').tooltip({container: 'body'}); ); $('a').click(function() { $('html, body').animate({ scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top }, 500); return false; }); – Robert Crous Oct 15 '14 at 09:27
just for future reference: remove the px from the reduce variable and it works like a charm! Thank you so so so much!!!! – Robert Crous Oct 15 '14 at 09:35
Sorry thats ma bad didn't do with any intention never checked that will edit it – Benjamin Oct 15 '14 at 09:52
since you seem to be a bit more active, can you help me with ahb's code? either i'm not implementing it correctly or it's just not working – Robert Crous Oct 15 '14 at 09:57

Scroll when linked to id on same page

2 Answers2