I'm looking for a way to include a slide effect for when you click a link to a local anchor either up or down the page.
I'd like something where you have a link like so:
<a href="#nameofdivetc">link text, img etc.</a>
perhaps with a class added so you know you want this link to be a sliding link:
<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>
Then if this link is clicked, the page slides up or down to the required place (could be a div, heading, top of page etc).
This is what I had previously:
$(document).ready(function(){
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
});
});
Here is the solution that worked for me. This is a generic function which works for all of the
a
tags referring to a nameda
Note 1: Make sure that you use double quotes
"
in your html. If you use single quotes, change the above part of the code tovar target = $("a[name='" + name.substring(1) + "']");
Note 2: In some cases, especially when you use the sticky bar from the bootstrap, the named
a
will hide beneath the navigation bar. In those cases (or any similar case), you can reduce the number of the pixels from your scroll to achieve the optimal location. For example:$('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');
will take you to thetarget
with 15 pixels left on the top.Test it here:
http://jsbin.com/ucati4
Assuming that your href attribute is linking to a div with the tag id with the same name (as usual), you can use this code:
HTML
JAVASCRIPT - (Jquery)
I stumbled upon this example on https://css-tricks.com/snippets/jquery/smooth-scrolling/ explaining every line of code. I found this to be the best option.
https://css-tricks.com/snippets/jquery/smooth-scrolling/
You can go native:
or with jquery:
You may want to add offsetTop and scrollTop value in case You are animating not the whole page , but rather some nested content.
e.g :
I stuck with my original code and also included a fade in 'back-to-top' link making use of this code and a bit from here too:
http://webdesignerwall.com/tutorials/animated-scroll-to-top
Works well :)