jQuery Scroll to Div

I am making an FAQ page and have buttons across the top to jump to a category (it jumps to the p tag that I use as the category label, ex. <p id="general"> for my general category). Instead of just jumping right to the category, I want to add a scroll effect. I want something like http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm that scrolls to the desired part of my page. That link is a script that goes to the top of the page with a nice scrolling effect. I need something similar that will scroll to where I link to. For example, if I want to go to a misc. category, I want to just be able to have <a href="#misc">Miscellaneous</a> and have it scroll to that section of the page.

253448 次浏览
小开
最佳答案 
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});

Check this link: http://css-tricks.com/snippets/jquery/smooth-scrolling/ for a demo, I've used it before and it works quite nicely.

小开

if the link element is:

<a id="misc" href="#misc">Miscellaneous</a>

and the Miscellaneous category is bounded by something like:

<p id="miscCategory" name="misc">....</p>

you can use jQuery to do the desired effect:

<script type="text/javascript">
$("#misc").click(function() {
$("#miscCategory").animate({scrollTop: $("#miscCategory").offset().top});
});
</script>

as far as I remember it correctly.. (though, I haven't tested it and wrote it from memory)

小开

Something like this would let you take over the click of each internal link and scroll to the position of the corresponding bookmark:

$(function(){
$('a[href^=#]').click(function(e){
var name = $(this).attr('href').substr(1);
var pos = $('a[name='+name+']').offset();
$('body').animate({ scrollTop: pos.top });
e.preventDefault();
});
});
小开

Could just use JQuery position function to get coordinates of your div, then use javascript scroll:

var position = $("div").position();
scroll(0,position.top);
小开

It is often required to move both body and html objects together.

$('html,body').animate({
scrollTop: $("#divToBeScrolledTo").offset().top
});

ShiftyThomas is right:

$("#divToBeScrolledTo").offset().top + 10 // +10 (pixels) reduces the margin.

So to increase the margin use:

$("#divToBeScrolledTo").offset().top - 10 // -10 (pixels) would increase the margin between the top of your window and your element.
小开

I ran into the same. Saw an example using this: https://github.com/flesler/jquery.scrollTo

I use it as follows:

$('#arrow_back').click(function () {
$.scrollTo('#features_1', 1000, { easing: 'easeInOutExpo', offset: 0, 'axis': 'y' });
});

Clean solution. Works for me!

小开

The script below is a generic solution that works for me. It is based on ideas pulled from this and other threads.

When a link with an href attribute beginning with "#" is clicked, it scrolls the page smoothly to the indicated div. Where only the "#" is present, it scrolls smoothly to the top of the page.

$('a[href^=#]').click(function(){
event.preventDefault();
var target = $(this).attr('href');
if (target == '#')
$('html, body').animate({scrollTop : 0}, 600);
else
$('html, body').animate({
scrollTop: $(target).offset().top - 100
}, 600);
});

For example, When the code above is present, clicking a link with the tag <a href="#"> scrolls to the top of the page at speed 600. Clicking a link with the tag <a href="#mydiv"> scrolls to 100px above <div id="mydiv"> at speed 600. Feel free to change these numbers.

I hope it helps!

小开

You can also use 'name' instead of 'href' for a cleaner url:

    $('a[name^=#]').click(function(){
var target = $(this).attr('name');
if (target == '#')
$('html, body').animate({scrollTop : 0}, 600);
else
$('html, body').animate({
scrollTop: $(target).offset().top - 100
}, 600);
});

提交答案