• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

One Page Scroll Plugin Questions

New Here ,
Oct 21, 2018 Oct 21, 2018

Copy link to clipboard

Copied

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.h...  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

Views

407

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 21, 2018 Oct 21, 2018

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 21, 2018 Oct 21, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 21, 2018 Oct 21, 2018

Copy link to clipboard

Copied

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, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 22, 2018 Oct 22, 2018

Copy link to clipboard

Copied

annika1979  wrote

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

The script you have chosen scrolls to the appropriate section after a number of seconds has elapsed, you should be seeing that action. The code that I provided will scroll to the appropriate section when you click on your arrow images that are positioned at bottom of each section.

Your current page doesnt show the changes that I provided. If you can incorporate those changes I can then look at your page again and see why it is you are saying it doesnt work.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 22, 2018 Oct 22, 2018

Copy link to clipboard

Copied

Hey Osgood

Implemented you code to my page - thanx a thousand for your help 🙂

kind regards Annika

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 22, 2018 Oct 22, 2018

Copy link to clipboard

Copied

LATEST

annika1979  wrote

Hey Osgood

Implemented you code to my page - thanx a thousand for your help 🙂

kind regards Annika

No problem. You have it working to some extent, the first arrow works anyway. Im still not sure you need both the auto scroll and the manual scroll on the same page.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines