Scrolling issue with smooth scrolling javascript

Question

This is kind of a complicated issue.

I was first working on getting the smooth scrolling to work on this question.

Then, I got it to work. But now another issue came up where I can not scroll my "smooth scrollable content(which is on div#right)" with my mouse. Meaning can not scroll up and down manually unless I click links that triggers smooth scrolling.

Other thing is my background image got messed up. Before background-size was set to "cover" so that it stretches out all the way. But when I made changes to fix the smooth scrolling issues, background setting also got messed up and now it not in the right size.

current state http://1ne-studio.com/test2/index2.html

id:test
pass:2015

correct background appearance http://1ne-studio.com/test2/index.html

How could I fix these issues... Any help will be much appreciated!

Answer 1

Okay, well there are some things on there that you did that I wasn't sure why. But I made a page very similar to yours here On jsfiddle. The layout you made degrades as it gets smaller in width and with mobile devices being over 50% of the traffic, you may want to consider a mobile friendly approach. Anyway, check out the link and it has everything you want (minimized of course).

I used the jQuery animation function

$.fn.scrollNav = function (margin_top) {

    event.preventDefault();
    var
       goTo = $(this).attr("href"),
       addTop = margin_top | 0;

    $('html, body').animate({
        scrollTop: $(goTo).offset().top + addTop
    }, 700);
}

It also uses normal links to the element <a href="#somewhere">here</a> This does a couple of things:

• 1: Users know how to use them already
• 2: Adds to the browser history so if the user wants to hit the back button, it takes them to the previous position of the page, not the website they came from.

Again, the layout in the link is much more fluid and won't degrade so bad with different sized desktops. Until of course you get to mobile, then you'll need to adjust with @media queries.

Additionally, you can now optionally add a margin top difference if you want to. Using the only parameter in the method, you can provide a number that will offset the scroll. you can use, say, 100 and it will land an extra 100 pixels after the element or you can say -100 and it will land 100 pixels before the element.

Hopes this helps my man. Any questions please feel free to ask and I'll adjust.