Dfyjkt

I'm using the wonderful vue-scrollto along with bootstrap. It's working great and lands perfectly when viewed on the desktop. On mobile however, the heading is off the top. I know from previous experience with dynamic scrolling that padding the header is the way to go, which works on one section in my site but not on another.

I thought perhaps it was because I'm loading content dynamically and adding content to the dom, but doesn't seem to be the issue since other, static sections have the same issue. It does seem to be when a content section is taller than the viewport. I was originally targeting the id of the container for the section but changed it to the id of the heading with no change.

If I add offset it can help but inconsistently - works on the about section but the locations section is still way off. I figured it would just scroll the top of the container i'm targeting to the top of the page, but that doesn't seem to be what's happening.

Example link:

 <li class="nav-item">
 <a class="nav-link nav-btn" href="#" v-scroll-to="'#title-about'" data-toggle="collapse">About</a>
 </li>

In my app.js:

Vue.use(VueScrollTo, 
 container: "body",
 offset: -100
)

You can see it in action here: lovelaundry

It seems as though any section that is taller than the viewport doesn't land right - like it positions in the vertical center rather than scrolling to place the top of the targeted element at the top of the viewport, which would be ideal.

I figured out a solution - not very elegant and I doubt it's the best, but it does work and gives me pretty precise control. I created a root method like so:

 scrollTo(target, offset1 = -100, offset2 = -450) 
 //viewport break is 991, offset1 is when greater then 991 for larger viewports, offset2 for smaller
 console.log('1: ' + offset1 + ' ,

Then I either call this directly from HTML through my laravel blade template:

 <a class="nav-link nav-btn" href="#" v-on:click="scrollTo('#title-about', -100, -250)" data-toggle="collapse">About</a>

Or emit it up to the parent from a component:

 changeLocation(location) 
 this.$eventHub.$emit('location-loaded', location);
 this.$eventHub.$emit('scroll-to', '#title-locations', -100, -450); 
 ,

In the template:

<a v-for="loc in locations" v-on:click="changeLocation(loc)" class="dropdown-item nav-btn" v-bind:class=" active: loc.id == location.id "> loc.name </a>

I still don't quite get how it's working - I have to use different offset values to make it land in the right place if I'm linking from the top of the page or the bottom.