CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3prestashopscrollspy
George Panayi
George Panayi

Reputation: 1772

How to set stop position on scrollspy

I'm using bootstrap scrollspy on my project, basically I have a click here link which has the following url format http://example.com/#positionA and on the page that it loads I have the following html code

<p></p>
<h3 id="positionA">Position A</h3>
<p>This is a test code</p>

The issue that I had is that the page loads on the position that I want but the scroll stops on the

This is a test code

position instead of the Position A.

How I can fix the position that the scrollspy stops so that I will stop before the title of the paragraph and display the title as well? Thank you

[UPDATE] The project is a prestashop website and I'm working on the Terms and Conditions of the website. So on the delivery page I have the click here where if the client clicks it it will take him to the terms and conditions page on the specific sections. On the body I have this one 

<body id="cms" class="cms cms-3 cms-terms-and-conditions-of-use hide-right-column lang_en  two-columns" data-spy="scroll" data-offset="50">

And all the text belogs to this div

<div id="center_column" class="center_column col-xs-12 col-sm-9">
<div class="rte">
</div>
</div>

So on the delivery page I have the following code

<li>Terms and conditions for delivery, refund and returns please <a href="http://examople.com/content/3-terms-and-conditions-of-use#refunds_returns">click here</a></li>

Upvotes: 1

Views: 1355

Answers (2)

George Panayi
George Panayi

Reputation: 1772

I have found the solution, here is my code how i fixed it

var hash = false;
if(window.location.hash) {
    hash = true;
}

if (hash)
{
    hash = document.URL.substr(document.URL.indexOf('#')+1);
    var anchor = $('#'+hash).offset();
    console.log("left" + anchor.top);
    anchor.top = anchor.top - 100;
    console.log("top" + anchor.top);
    $('html, body').animate({
            scrollTop: anchor.top
        }, 500);
}

Upvotes: 1

nolawi
nolawi

Reputation: 4649

Use Scrollspy offset

By adding 

 data-offset="10"

to 

<a data-spy="scroll" data-target="#positionA" data-offset="20" href="#positionA" >

it will 'offset from top when calculating position of scroll' in pixels

Upvotes: 0

Related Questions