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!

Why did you comment out position: absolute; on line 217 of the style2.css file? Putting that back allows me to scroll properly. — Brant Olsen
– Brant Olsen, Commented Jun 24, 2015 at 17:36
Putting that back on disables the smooth scroll that can be trigger by links on far left. So I would like to fix those 2 issues without disabling the smooth scroll. — Hirohito Yamada
– Hirohito Yamada, Commented Jun 24, 2015 at 17:48

Philll_t · Accepted Answer · 2015-06-25 19:31:58Z

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.

edited Jun 25, 2015 at 19:31

answered Jun 24, 2015 at 18:32

Philll_t

4,4377 gold badges48 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hirohito Yamada Over a year ago

wow! thank you so much! i will definitely take a good look at this. One quick question though, is second navigation (in your fiddle, item1~3) scrollable like my test site?

Philll_t Over a year ago

Yeah, that won't be a problem just add overflow-y: auto and you're set. Thanks!

Philll_t Over a year ago

@HirohitoYamada was my answer able to help you? If so, can you kindly select it as the correct answer, if not please tell me where else I can help. Thanks!

Hirohito Yamada Over a year ago

Thank you! this is just what I needed! One last question, how can I adjust the scroll point? I would like to adjust so that when scrolls, scrolling content won't be shown at the very top but maybe have 100px margin from top?

Philll_t Over a year ago

@HirohitoYamada, I updated the answer and js fiddle. Check it out!

Collectives™ on Stack Overflow

Scrolling issue with smooth scrolling javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related