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');
});
});
You should also consider that the target has a padding and thus use
position
instead ofoffset
. You can also account for a potential nav bar you don't want to be overlapping the target.This made my life so much easier. You basically put in your elements id tag and its scrolls to it without a lot of code
http://balupton.github.io/jquery-scrollto/
In Javascript
In your html
Here I am all the way down the page
My approach with jQuery to just make all of the embedded anchor links slide instead of jump instantly
It's really similar to the answer by Santi Nunez but it's more reliable.
Support
SS Slow Scroll
This solution does not require anchor tags but you do of course need to match the menu button (arbitrary attribute, 'ss' in example) with the destination element id in your html.
ss="about"
takes you toid="about"
Fiddle
https://jsfiddle.net/Hastig/stcstmph/4/
Description
You can do this using
jQuery.offset()
andjQuery.animate()
.Check out the jsFiddle Demonstration.
Sample
More Information