Naar div scrollen

Status
Niet open voor verdere reacties.
F

Frenske123

Terugkerende gebruiker
Lid geworden
2 jul 2007
Berichten
1.267
Hoi,

Weet iemand hoe je door het klikken op b.v een button naar de bodem of top van een div kunt scrollen.
ik zou het met een # anker kunnen doen maar gaat niet zo elegant naar beneden.
 
Dit zou het moeten doen:
[JS]
function goTo(id) {
var obj = document.getElementById(id);

var scrollTop = document.body.scrollTop || window.pageYOffset;
if (obj.offsetTop > scrollTop) {
window.scrollBy(0, -1);
setTimeout(function(){goTo(id)}, 10);
} else if (obj.offsetTop < scrollTop) {
window.scrollBy(0, 1);
setTimeout(function(){goTo(id)}, 10);
}
}
[/JS]

Je zou ook naar deze link kunnen gaan:
http://flesler.com/jquery/scrollTo/
 
Laatst bewerkt:
Bedank, maar weet niet hoe toe te passen, zou ziet het er ongeveer uit:



button (naar bodem van div met id a)



<div><p>tekst tekst tekst
tekst tekst tekst
tekst tekst tekst
tekst tekst tekst
</p>
</div>



<div id="a"> inhoud div </div>
 
Laatst bewerkt:
Het is helaas een lineaire animatie maar hier is het script
[JS]
function goTo(elem) {
elem = document.getElementById(elem);

var interval = setInterval(function() {
var dist = elem.offsetTop - document.body.scrollTop;

if (dist - 10 > 20) {
window.scrollBy(0, 10);
} else if (dist + 10 < -20) {
window.scrollBy(0, -10);
} else {
clearInterval(interval);
}
}, 5);
}
[/JS]

De functie kan zo worden opgeroepen:

HTML: 
    <button onclick="javascript:goTo('ID van het DOM element')">Ga naar..</button>
 
vergeet ik niets, krijg het niet werkend

Code: 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>test scroll</title>
    <script type="text/javascript">
    function goTo(elem) {
        elem = document.getElementById(elem);
 
        var interval = setInterval(function() {
            var dist = elem.offsetTop - document.body.scrollTop;
 
            if (dist - 10 > 20) {
                window.scrollBy(0, 10);
            } else if (dist + 10 < -20) {
                window.scrollBy(0, -10);
            } else {
                clearInterval(interval);
            }
        }, 5);
    }
    </script>
<style type="text/css">
#testdiv {
	border: 1px solid #F00;
}
</style>
</head>
<body>
<button onclick="javascript:goTo('#testdiv')">Ga naar..</button>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="testdiv">Hier wordt de inhoud voor  id "testdiv" weergegeven</div>
</body>
</html>


edit
hier zat het foutje # hekje teveel ?
<button onclick="javascript:goTo('testdiv')">Ga naar..</button>

Opmerking:
Naar bovenste van pagina is nu niet meer mogelijk, tenzij ik pagina ververs
 
Laatst bewerkt:
Ik heb op internet gezocht naar een bestaande functie voor scrollen en kwam dit tegen
[JS]
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');

$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
location.hash = target;
});
});
}
}
});

// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments,
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}

});
[/JS]

Deze link moet in de head staan om gebruik te kunnen maken van de functie:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

link kan gewoon weer bestaand uit
HTML: 
 <a href="#Id van het DOM element">ga naar</a>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan