Dont know why my webpage moves up when I click a button in a One Page Portfolio Site

[Harbinder]

I am learning webdesign. I have desined a single page website. Here is the link of the website :

http://harbindersingh.site88.net/

When I click the Portfolio button from the home page the padding that I have on the portfolio page got removed. If I click on the navigation buttons and select Portfolio it works fine. The padding appear.

Help me to remove this. I want that padding should always appear in both cases.

With Regards

[PaulOB]

Hi,

I’m not sure if this is the problem you are describing but what I see is that if you click ‘portfolio’ from the fixed navbar a js routne is invoked which smoothly scrolls you down to the portfolio section to the exact spot required.

If instead you click the blue button that says ‘See my Work’ then that has no js and is just an in-page link (fragment identifier) that goes straight to the element called #portfolio and therefore does not account for the fixed header as that is handled by the js for the navbar routine.

Is that the issue you are talking about?

If so then the answer would seem to be to make the page scroll from the blue button using the js you already have in place.

e.g.Find this part in your scripts file:

//Use smooth scrolling when clicking on navigation
$('.navbar a[href*=#]:not([href=#])').click(function() {
  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-topoffset+2
    }, 1200);
      return false;
    } //target.length
  } //click function
}); //smooth scrolling

Then add a ‘scrollit’ class like so to the routine:

//Use smooth scrolling when clicking on navigation
$('.navbar a[href*=#]:not([href=#]),.scrollit').click(function() {
  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-topoffset+2
    }, 1200);
      return false;
    } //target.length
  } //click function
}); //smooth scrolling

Then add that class in the html to the blue link.

e.g.

 <p><a class="btn btn-primary btn-xl scrollit" href="#portfolio" role="button">SEE MY WORK</a></p>

[Harbinder]

Thanks PaulOB,

It worked. Thanks for the advice. This is the first time that I have tried to take help from Sitepoint and you really got it right.

With Regards

Harbinder Singh

[Harbinder]

The same problem I am facing on the navbar if I view it on <768 pixels. The collapse menu come in the right corner and when I click any page then a little margin is coming on the page top. Don’t know why.

Here is the link of website :

http://harbindersingh.site88.net/

[PaulOB]

If we are talking about the same problem then its because your header has wrapped to a new line and is thus deeper than before and the content will rise underneath.

e.g.

At smaller widths you are switching to the hamburger so you either need to do 2 things.

1. switch to the hamburger earlier (i…e. before the menu drops)

or

2. Allow the menu to fit alongside the logo without dropping by either making the menu smaller or the logo smaller.

As you are learning web design I will leave you to work out the details but they will involve delving into the media queries and maybe reducing padding/font-size or margins to allow the menu to fit at 768px.

[Harbinder]

I am talking about the white margin that is not going away when I click any link through the collapsable menu. This problem is coming in every page.

Check the site on > http://harbindersingh.site88.net/

Thanks

[PaulOB]

Hi,

@Harbinder

I am talking about the white margin that is not going away when

It should be clear from your screenshot what the cause of this problem is so you need to start thinking things through in order that you can solve these issues for yourself as you progress.

The black header is shorter in height at that screen size than it is at the normal desktop width. Your scroll animation is controlled by JS but uses a ‘magic number’ to offset the distance it scrolls to and that magic number is fixed in px so you need to ensure that your header matches this height at all times.

You can add a min-height to help with this.

header .navbar {min-height:68px}

Of course that doesn’t take into account if the header wraps or if the user enlarges font-size but that would be a more complicated question to fix as would involve modifying your js routines to accommodate fluid sizes and would involve a full rewrite of the code.