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
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.
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
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>
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.
Copy link to clipboard
Copied
Hey Osgood
Implemented you code to my page - thanx a thousand for your help 🙂
kind regards Annika
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.