Skip to main content
annika1979
annika1979
Participant
October 21, 2018
Question

One Page Scroll Plugin Questions

  • October 21, 2018
  • 1 reply
  • 583 views

Hi There

I am creating my first webpage in Dreamweaver cc.

I used this plugin https://www.jqueryscript.net/animation/Basic-Cross-platform-One-Page-Scroll-Plugin-jQuery-fullpage.html  and now I would like to implement a button in each section that links to the next section.

I thought this should work with a id and a link to this id - but it doesn't.

Is anybody out there willing to help me? What information do I have to provide for that?

Here is the link to my site:

Annika Fries - Multimedia Artist

Thank you very much for your help and kind regrads Annika

    This topic has been closed for replies.

    1 reply

    O
    osgood_
    Legend
    October 21, 2018

    Wrap your arrow icon image buttons in an anchor tag, as shown below, and assign the id of the section you wish to scroll to onclick as the link i.e., below you can see it is #grafikdesign

    <a href="#grafikdesign"><img src="http://www.annikaaa.ch/Bilder/PfeilRunter.png"  width="118" height="60" alt="Drei Pfeile nach unten"/></a>

    Then add the script below to your page AFTER the link to your jQuery library <script   src="https://code.jquery.com/jquery-3.1.1.min.js"  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="  crossorigin="anonymous"></script>

    <script>

    $(document).ready(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;

    }

    }

    });

    });

    </script>

    I think the other scrolling script you have on your page is evoked after so many seconds BUT it just confused me so having both might not be sensible. I'll leave that decision up to you.

    annika1979
    annika1979Author
    Participant
    October 22, 2018

    Hey Osgood

    Thanks for trying to help, but it still doesn't work.

    What do you mean with the evoked scrolling script and that it's up to me? Sorry my english is as as bad as my programming knowhow ;-)

    Did I choose a bad script? can you recomend a better one?

    Thank you and kind regards

    Annika

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    October 22, 2018

    Try the following

    <!DOCTYPE html>

    <html lang="en">

    <head>

      <title>Bootstrap Example</title>

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

      <style>

      body {

          position: relative;

      }

      </style>

    </head>

    <body data-spy="scroll" data-target=".navbar" data-offset="50">

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> 

      <ul class="navbar-nav">

        <li class="nav-item">

          <a class="nav-link" href="#section1">Section 1</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#section2">Section 2</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#section3">Section 3</a>

        </li>

        <li class="nav-item dropdown">

          <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

            Section 4

          </a>

          <div class="dropdown-menu">

            <a class="dropdown-item" href="#section41">Link 1</a>

            <a class="dropdown-item" href="#section42">Link 2</a>

          </div>

        </li>

      </ul>

    </nav>

    <div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">

      <h1>Section 1</h1>

      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">

      <h1>Section 2</h1>

      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">

      <h1>Section 3</h1>

      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">

      <h1>Section 4 Submenu 1</h1>

      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">

      <h1>Section 4 Submenu 2</h1>

      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    </body>

    </html>

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices