1

What I'd like to do is set the offset for scrollspy as well as give it a smooth transition to each section. I would prefer to not use a plugin or data-attributes (If data-attributes are necessary then ok), but I would like a solution that takes the javascript below and adds the smooth animated scroll effect as well. Jquery solution if possible.

Scrollspy works and the offset works with this code below: Possibly someone can take this code and add to it to set the smooth transition as well?

var offset = 60;

    $('.navbar li a').click(function(event) {
            event.preventDefault();
            $($(this).attr('href'))[0].scrollIntoView();
            scrollBy(0, -offset);
    });

My HTML/CSS code is setup as follows:

I have a container div with the class .main-content. This is set in the css with a margin which offsets it from my header and footer which are fixed top and bottom and have a height of 60px each.

The CSS for <div class="main-content"></div> is as follows:

.main-content {position: realtive; width: 100%; height: 100%; margin: 60px 0 60px 0;}

I have sections within .main-content and each section has an id="..." and the HTML looks like this. I've removed all content so you can see the sections clearly.

<div class="main-content" data-spy="scroll" data-target="#dl-menu">
    <section id="top" class="top">
        ...
    </section>
    <section id="services" class="services">
        ...
    </section>
    <section id="portfolio" class="portfolio">
        ...
    </section>
    <section id="pricing" class="pricing">
        ...
    </section>
    <section id="faq" class="faq">
        ...
    </section>
    <section id="quote" class="quote">
        ...
    </section>
</div>

The menu I'm using has a structure like so:

<div id="dl-menu" class="dl-menuwrapper">
    <button class="dl-trigger">Open Menu</button>
    <ul class="dl-menu">
        <li><a href="#top">BACK TO TOP</a></li>
        <li><a href="#services">OUR SERVICES</a></li>
        <li><a href="#portfolio">OUR PORTFOLIO</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#quote">GET YOUR QUOTE</a></li>
    </ul>
</div>

I'm quite new to Jquery/JavaScript and have tried every solution I could find, but have not found a solution that works with my layout. If anyone can help me figure this out I would greatly appreciate it!

Jeremy Brown
  • 79
  • 2
  • 11

2 Answers2

1

After messing with things from leuan's answer this script started to make sense and I was able to combine some information I found from the link you provided in your answer and this seems to work for the setup I'm using.

$(".dl-menu li a[href^='#']").on('click', function(e) {

        // This sets the hash
        var target;
        target = this.hash;

        // Prevent default anchor click behavior
        e.preventDefault();

        // The grabs the height of my header
        var navOffset;
        navOffset = $('#header').height();

        // Animate The Scroll
        $('html, body').animate({
            scrollTop: $(this.hash).offset().top - navOffset
        }, 600, function(){

        // Adds hash to end of URL
        return window.history.pushState(null, null, target);

        });

});

I want to thank leuan for all his help for it was his help that led me to this solution. I hope this works for other people as it did me.

Here is the fiddle - https://jsfiddle.net/wptjzbno/4/

Community
  • 1
  • 1
Jeremy Brown
  • 79
  • 2
  • 11
0

Looks like you're using the code from this answer.
That answer also states that there is no way to simply change the scroll smoothing done by Bootstrap.

I'd recommend trying a different solution like the code below from this answer.

$("#nav ul li a[href^='#']").on('click', function(e) {

   // prevent default anchor click behavior
   e.preventDefault();

   // store hash
   var hash = this.hash;

   // animate
   $('html, body').animate({
       scrollTop: $(hash).offset().top
     }, 300, function(){

       // when done, add hash to url
       // (default click behaviour)
       window.location.hash = hash;
     });

});

fiddle

Community
  • 1
  • 1
Ieuan
  • 1,140
  • 1
  • 12
  • 27
  • I also tried that, but it did not work. Under the //animate would I replace 'html, body' with my container div? If yes then I've tried that too and does not work. I also read the comments and the few changes mentioned tried those as well. Also that code doesn't set the offset. – Jeremy Brown Sep 12 '15 at 00:31
  • @JeremyBrown setting the offset isn't the problem, you just add that to `$(hash).offset().top` and that should sort itself. There is no way this doesn't work especially if scrollspy works normally – Ieuan Sep 12 '15 at 01:26
  • ok so I tried this and it's scrolling to each section with smooth scroll, but the offset of 60, where do I set that? – Jeremy Brown Sep 12 '15 at 01:35
  • Change `scrollTop: $(hash).offset().top` to `scrollTop: $(hash).offset().top + 60` – Ieuan Sep 12 '15 at 01:35
  • here is the jfiddle with that code and the + 60 added https://jsfiddle.net/er6wg8vk/1/ doesn't work on there either. – Jeremy Brown Sep 12 '15 at 02:12
  • The JSFiddle wasn't set to include jQuery. Also, the offset should be -60 not +60, my bad. [This](https://jsfiddle.net/Ieuank/wptjzbno/) JSFiddle works flawlessly. – Ieuan Sep 12 '15 at 05:24
  • I just tried your fiddle and when I click on any link it goes up under the header, so it's not working still. =( I also tried that in my code locally and did not make any difference. I'm testing in Firefox. I did test it in Chrome and it works, but not in Firefox. – Jeremy Brown Sep 12 '15 at 09:58
  • @JeremyBrown found the problem. If you remove `window.location.hash = hash;` it works in Firefox too. Firefox forces the default internal linking behavior. – Ieuan Sep 12 '15 at 14:46
  • You're right, the scroll works if you remove that, but the link no longer changes were before it did. Is there a way to fix this so the link continues to change? – Jeremy Brown Sep 12 '15 at 18:33
  • Thanks for all your help leuan, I found a solution and posted it for others, feel free to take a look. – Jeremy Brown Sep 12 '15 at 19:10