Avatar billede Morten Professor
16. maj 2017 - 13:45 Der er 6 kommentarer og
1 løsning

Jquery .scrollTop

Hej Eksperter

Jeg prøver på at lave en scroll function.

Det den skal gøre er at gå til et id som en <a id="1" href="#"
Har feks. 1,2,3,4
Den skal så gå til id'et på siden.
Her er koden:
https://jsfiddle.net/r030Lszs/

Håber i forstår hvad jeg mener.
Ellers sig til ;)
Der er for at undgå at skrive hvert enkelt id, men skal selv hente id fra linket.

Med venlig hilsen
Morten
Avatar billede olsensweb.dk Ekspert
16. maj 2017 - 14:21 #1
du kan ikke genbruge id'er på siden, den skal være unik

hvorfor vil du bruge js til dette ??, det kan laves med rent HTML

<!DOCTYPE html>
<html lang="da">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>demo</title>

<style type="text/css">
</style>

</head>
<body>
<a id="1">Hej med dig 1</a><br>
<a id="2">Hej med dig 2</a><br>
<a id="3">Hej med dig 3</a><br>
<a id="4">Hej med dig 4</a><br>


Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
<a href="#1">Hej med dig :D</a><br>
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
<a href="#2">Hej med dig :D:D</a><br>
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
<a href="#3">Hej med dig :D:D:D</a><br>
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
<a href="#3">Hej med dig :D:D:D:D</a><br>
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
Hej med dig<br />
</body>
</html>
Avatar billede olsensweb.dk Ekspert
16. maj 2017 - 14:22 #2
<a href="#3">Hej med dig :D:D:D:D</a><br>
skal self være
<a href="#4">Hej med dig :D:D:D:D</a><br>
:)
Avatar billede Morten Professor
16. maj 2017 - 14:38 #3
Hej Olsen

Det er fordi jeg gerne vil have den effekt med :)
Avatar billede olsensweb.dk Ekspert
17. maj 2017 - 13:56 #4
du kan give dit a tag et name du kan springe til.
fandt inspiration her
http://stackoverflow.com/questions/8725042/anchor-tag-and-name-attribute-animated-scroll

<!DOCTYPE html>
<html lang="da">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
        <title>demo</title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            var scroll = {
                ready: function () {
                    $('#content a').click(function () {
                        var aid = $(this).attr('id');    // 3 OK                       
                        var aTag = $("a[name='id_"+ aid +"']");
                        $('html,body').animate({scrollTop: aTag.offset().top},'slow');
                    })
                }
            }
            $(document).ready(scroll.ready);
        </script>
    </head>
    <body>
        <div id ="toc">
            <a name="id_1" href="#1">Hej med dig 1</a><br>
            <a name="id_2" href="#2">Hej med dig 2</a><br>
            <a name="id_3" href="#3">Hej med dig 3</a><br>
            <a name="id_4" href="#4">Hej med dig 4</a><br>
        </div>


        <div id="content">
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            <a id="1" >Hej med dig :D</a><br>
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            <a id="2" >Hej med dig :D:D</a><br>
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            <a id="3">Hej med dig :D:D:D</a><br>
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            <a id="4">Hej med dig :D:D:D:D</a><br>
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
        </div>
    </body>
</html>
Avatar billede Morten Professor
17. maj 2017 - 20:20 #5
Jeg har lige prøvet at teste det.
Det virker fint med at flytte til de sektioner men, det med effekten vil ikke.
Virker det det fint ved dig? hvor den langsomt bevæger sig ned til punktet.
Avatar billede olsensweb.dk Ekspert
17. maj 2017 - 21:44 #6
>Virker det det fint ved dig?
ja

>hvor den langsomt bevæger sig ned til punktet.
der er ikke nogle effekt på nedafgående, dvs når du trykker på linkene i TOC,

effekten kommer når du trykker på linkene ned i content
dvs alle dem du har markeret med :D


istedet for name attributten på a taget vil jeg nok bruge rel attributten
https://www.w3schools.com/tags/tag_a.asp

dette er vigtigt
rel="content_x" id="toc_x"



her er effekten bække veje.

<!DOCTYPE html>
<html lang="da">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
        <title>demo</title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            var scroll = {
                ready: function () {
                    $('a').click(function () {
                        var aid = $(this).attr('id');    // 3 OK
                       
                        var aTag = $("a[rel='"+ aid +"']");
                        $('html,body').animate({scrollTop: aTag.offset().top},'slow');
                    })
                }
            }
            $(document).ready(scroll.ready);
        </script>
    </head>
    <body>
        <div id ="toc">
            <a rel="content_1" id="toc_1">Hej med dig 1</a><br>
            <a rel="content_2" id="toc_2">Hej med dig 2</a><br>
            <a rel="content_3" id="toc_3">Hej med dig 3</a><br>
            <a rel="content_4" id="toc_4">Hej med dig 4</a><br>
        </div>

        <div id="content">
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            <a rel="toc_1" id="content_1">Hej med dig :D</a><br>           
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            <a rel="toc_2" id="content_2">Hej med dig :D:D</a><br>           
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            <a rel="toc_3" id="content_3">Hej med dig :D:D:D</a><br>           
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            <a rel="toc_4" id="content_4">Hej med dig :D:D:D:D</a><br>           
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
            Hej med dig<br />
        </div>
    </body>
</html>
Avatar billede Morten Professor
18. maj 2017 - 06:37 #7
Perfekt ;)

Så har jeg også fået en ny metode til at få sådan noget til at virke, havde ikke tænkt på at man kunne:
var aid = $(this).attr('id');    // 3 OK
                       
                        var aTag = $("a[rel='"+ aid +"']"); <---- Det viste jeg ikke man kunne :D
rel="toc_1" id="content_1" <---- Og bruge denne.

                        $('html,body').animate({scrollTop: aTag.offset().top},'slow');

Mange tak for hjælpen, det har været lærrigt.

Med venlig hilsen
Morten
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester