Highlighted

One Page Scroll Plugin Questions

New Here ,
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

326

Likes

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

One Page Scroll Plugin Questions

New Here ,
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

327

Likes

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
Oct 21, 2018 0
LEGEND ,
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.

Likes

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
Reply
Loading...
Oct 21, 2018 1
New Here ,
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

Likes

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
Reply
Loading...
Oct 21, 2018 0
Adobe Community Professional ,
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>


Ben

Likes

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
Reply
Loading...
Oct 21, 2018 1
LEGEND ,
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.

Likes

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
Reply
Loading...
Oct 22, 2018 0
New Here ,
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

Likes

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
Reply
Loading...
Oct 22, 2018 0
osgood_ LATEST
LEGEND ,
Oct 22, 2018

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Oct 22, 2018 0