CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Albert
Albert

Reputation: 167

Anchor to scroll not to the top

I have a mobile submenu in my page which is this code:

<select class="mobile_width_100 mobile_padding_010" onchange="location = this.options[this.selectedIndex].value;">
    <option value="#sc_overview">OVERVIEW</option>
    <option value="#sc_study_option">STUDY OPTIONS</option>
    <option value="#sc_packages">COURSES</option>
    <option value="#sc_pricing">PRICING</option>
    <option value="#sc_testimonial">TESTIMONIALS</option>
    <option value="#sc_faqs">FAQS</option>
    <option value="#sc_course_dates">COURSE DATES</option>
</select>

It's working good but when I click in one of the options it takes me to that option, and as I have a fixed frame for the logo of the page and the main menu, the div of this option is showing at the top. It would be a way to go the anchor adding it 100px to show the div correctly?

Upvotes: 1

Views: 98

Answers (3)

madalinivascu
madalinivascu

Reputation: 32354

Try using scrollTop and animate 

$(function(){
 if(window.location.hash) {
  target = '#'+window.location.hash;
  $("html,body").animate({
        scrollTop: $(target).offset().top + 100 //change 100 with the height of your logo
    });
} 
});

Upvotes: 0

Pedram
Pedram

Reputation: 16575

Try this:

target.offset().top + 100

Example:

$(".select").change(function () {
var val = $(this).val();
var target = $(val);
    $("html,body").animate({
        scrollTop: target.offset().top + 100
    })
})

Example:

jsFiddle Demo

Upvotes: 1

Jan Benda
Jan Benda

Reputation: 162

if i understand you correctly, you want to offset all the anchors by 100px right?

you can simply do that by giving every single anchor a class with the following attributes:

.anchor {
    position:relative;
    top: 100px;
    display: block;
    visibility: hidden;
}

and then in your html markup:

<a class="anchor" id="sc_overview">I am invisible</a>

Of course, if your anchor element is visible on the page, that may have an impact, so choose one that only fits that purpose.

Upvotes: 2

Related Questions