using smooth scroll by clicking a button

Topic: using smooth scroll by clicking a button

afshinshahpari@gmail.com asked 6 years ago

0 0

I am going to use smoothscroll when clicking a button , can you please bring an example that how it works?

Thanks in advance

Add comment

Aliaksandr Andrasiuk staff answered 6 years ago

0 0 Best answer

Hello,

For reach that it's enough to wrap <SmoothScroll> component into a <Button> component. But instead of adding a text to a Button you should add it to the component. Your code will look like this :

<MDBBtn color="primary">
       <MDBSmoothScroll to="element">
              Text
        </MDBSmoothScroll>
 </MDBBtn>

Best regards,

Aliaksandr from MDB

afshinshahpari@gmail.com commented 6 years ago

Thanks,

1) I had tried it before but unfortunately using it causes the system to show blank screen.

2) How can I use SmoothScroll, to Scroll To specific row in a grid that is part of a page? Does SmoothScroll work in a grid too?

Regards

Aliaksandr Andrasiuk staff commented 6 years ago

Hello,

Be sure you set the ID of the destination element and set this ID as a 'to' prop of the <SmoothScroll> component without '#'.

If it doesn't help or I'm not getting it right please send me a code snippet.

Aliaksandr from MDB.

afshinshahpari@gmail.com commented 6 years ago

Here is the code, I had it in other part of code in the middle of scrollbar and for simplicity I moved it on top of code for test but still get blank screen:

  <React.Fragment className="smooth-scroll">
    <MDBBtn>
      <MDBSmoothScroll to="a1002">Section 1</MDBSmoothScroll>
    </MDBBtn>

...

Test

Aliaksandr Andrasiuk staff commented 6 years ago

Hello,

Seems like the problem in another part of your code or you doing something wrong.

Here is a code snippet where you can get familiar with the working <SmoothScroll> component:

import React, { Component } from "react";
import {
  MDBNavbar,
  MDBNavbarBrand,
  MDBBtn,
  MDBNavbarNav,
  MDBNavItem,
  MDBSmoothScroll,
  MDBContainer,
  MDBRow
} from "mdbreact";

class NavbarPage extends Component {
  render() {
    const outerContainerStyle = { height: "800px" };
    return (
      <MDBContainer>
        <MDBNavbar color="indigo" dark expand="md" className="mt-5">
          <MDBNavbarBrand>
            <strong className="white-text">Navbar</strong>
          </MDBNavbarBrand>
            <MDBNavbarNav left>
              <MDBNavItem>
                <MDBSmoothScroll to="section1" smooth>
                  Section 1
                </MDBSmoothScroll>
              </MDBNavItem>
              <MDBNavItem>
                <MDBSmoothScroll to="section2" smooth>
                  Section 2
                </MDBSmoothScroll>
              </MDBNavItem>
              <MDBNavItem />
            </MDBNavbarNav>
        </MDBNavbar>

        <MDBRow id="section1" style={outerContainerStyle} className="my-5">
          <h2>Section 1</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci
            erat, suscipit nec risus nec, ultrices pretium tortor. In imperdiet
            sem a lacus eleifend tempus. Donec est dui, finibus ac mattis eu,
            interdum eu nulla. Nulla pellentesque mi at mattis hendrerit. Etiam
            tempus, purus nec placerat ullamcorper, risus urna vestibulum erat,
            ut vestibulum libero ligula eu lorem. Cras nec mauris vel velit
            volutpat semper id quis nisl. Nunc ac interdum nisi. Fusce pharetra
            interdum urna vel ultricies. Nunc porttitor nisl eu odio vehicula,
            quis aliquam urna accumsan.
          </p>
          <p  id="a1002">
            Quisque aliquet risus eget consequat euismod. Nulla elementum nunc
            volutpat tellus mattis gravida. In hac habitasse platea dictumst.
            Pellentesque cursus ullamcorper nisl nec gravida. Curabitur vitae
            tortor pretium, rhoncus nulla viverra, molestie nulla. Nullam
            ullamcorper orci eget ante varius, ut cursus ipsum aliquet.
            Suspendisse quis nisl quis nunc auctor fermentum ac at lorem. Ut eu
            vestibulum ipsum. Nam tristique feugiat ex, vitae commodo odio
            aliquam quis. Nullam mollis maximus tellus ultricies interdum. Donec
            fermentum quis ligula a auctor. In sit amet ultrices massa, et
            sagittis dui.
          </p>
          <p>
            Duis tempus tellus felis, et maximus metus pulvinar sit amet.
            Pellentesque risus sem, aliquam molestie diam quis, congue maximus
            elit. Curabitur tristique auctor augue ultrices blandit. Vestibulum
            ante ipsum primis in faucibus orci luctus et ultrices posuere
            cubilia Curae; Donec sed ornare augue. Donec pulvinar non enim nec
            commodo. Aliquam viverra nisi quis nisi cursus tempus.
          </p>
          <p>
            Fusce pellentesque tellus id enim sagittis, nec euismod sem
            malesuada. Nunc in rutrum nisi. Sed vehicula eros nisl, ac accumsan
            tortor dictum nec. Praesent sed vestibulum est, eget rhoncus nisi.
            Suspendisse id tincidunt nisi, sed finibus risus. Aliquam aliquam
            condimentum sem, et scelerisque leo porttitor sed. Nam ut est vel
            sapien dignissim bibendum vitae vel justo. Quisque consequat porta
            tempor. Phasellus nec justo sit amet felis placerat aliquam sit amet
            ac mauris. Sed rutrum tellus nec nunc mollis, id mattis velit
            lobortis.
          </p>
          <p>
            Etiam dictum eu diam malesuada semper. Curabitur sed facilisis eros.
            Sed ac eros leo. Interdum et malesuada fames ac ante ipsum primis in
            faucibus. Aenean sit amet ipsum odio. Donec maximus nunc id nulla
            iaculis, quis fermentum ligula sagittis. Aenean faucibus finibus
            diam, sit amet ultrices elit suscipit id. Vestibulum bibendum eu
            erat quis facilisis. Nunc finibus vehicula augue, eu fringilla
            lectus laoreet sit amet. Morbi massa diam, elementum non vulputate
            nec, ultrices et ex.
          </p>
        </MDBRow>

        <MDBRow id="section2" style={outerContainerStyle} className="my-5">
          <h2>Section 2</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci
            erat, suscipit nec risus nec, ultrices pretium tortor. In imperdiet
            sem a lacus eleifend tempus. Donec est dui, finibus ac mattis eu,
            interdum eu nulla. Nulla pellentesque mi at mattis hendrerit. Etiam
            tempus, purus nec placerat ullamcorper, risus urna vestibulum erat,
            ut vestibulum libero ligula eu lorem. Cras nec mauris vel velit
            volutpat semper id quis nisl. Nunc ac interdum nisi. Fusce pharetra
            interdum urna vel ultricies. Nunc porttitor nisl eu odio vehicula,
            quis aliquam urna accumsan.
          </p>
          <p>
            Quisque aliquet risus eget consequat euismod. Nulla elementum nunc
            volutpat tellus mattis gravida. In hac habitasse platea dictumst.
            Pellentesque cursus ullamcorper nisl nec gravida. Curabitur vitae
            tortor pretium, rhoncus nulla viverra, molestie nulla. Nullam
            ullamcorper orci eget ante varius, ut cursus ipsum aliquet.
            Suspendisse quis nisl quis nunc auctor fermentum ac at lorem. Ut eu
            vestibulum ipsum. Nam tristique feugiat ex, vitae commodo odio
            aliquam quis. Nullam mollis maximus tellus ultricies interdum. Donec
            fermentum quis ligula a auctor. In sit amet ultrices massa, et
            sagittis dui.
          </p>
          <p>
            Duis tempus tellus felis, et maximus metus pulvinar sit amet.
            Pellentesque risus sem, aliquam molestie diam quis, congue maximus
            elit. Curabitur tristique auctor augue ultrices blandit. Vestibulum
            ante ipsum primis in faucibus orci luctus et ultrices posuere
            cubilia Curae; Donec sed ornare augue. Donec pulvinar non enim nec
            commodo. Aliquam viverra nisi quis nisi cursus tempus.
          </p>
          <p>
            Fusce pellentesque tellus id enim sagittis, nec euismod sem
            malesuada. Nunc in rutrum nisi. Sed vehicula eros nisl, ac accumsan
            tortor dictum nec. Praesent sed vestibulum est, eget rhoncus nisi.
            Suspendisse id tincidunt nisi, sed finibus risus. Aliquam aliquam
            condimentum sem, et scelerisque leo porttitor sed. Nam ut est vel
            sapien dignissim bibendum vitae vel justo. Quisque consequat porta
            tempor. Phasellus nec justo sit amet felis placerat aliquam sit amet
            ac mauris. Sed rutrum tellus nec nunc mollis, id mattis velit
            lobortis.
          </p>
          <p>
            Etiam dictum eu diam malesuada semper. Curabitur sed facilisis eros.
            Sed ac eros leo. Interdum et malesuada fames ac ante ipsum primis in
            faucibus. Aenean sit amet ipsum odio. Donec maximus nunc id nulla
            iaculis, quis fermentum ligula sagittis. Aenean faucibus finibus
            diam, sit amet ultrices elit suscipit id. Vestibulum bibendum eu
            erat quis facilisis. Nunc finibus vehicula augue, eu fringilla
            lectus laoreet sit amet. Morbi massa diam, elementum non vulputate
            nec, ultrices et ex.
          </p>
        </MDBRow>
        <MDBBtn>
          <MDBSmoothScroll to="a1002">a1002</MDBSmoothScroll>
        </MDBBtn>
      </MDBContainer>
    );
  }
}

export default NavbarPage;

As an example, I added a button on the bottom of the page by clicking on which page will be scrolled to the <p id="a1002">.

I mentioned that you added a 'className' property to the <React.Fragment>. That will not work in that way. Using Fragment means not adding an extra node to DOM. Instead of creating <React.Fragment> and adding a class to it just make a div container and add class to the div.

Best regards,

Aliaksandr from MDB.

afshinshahpari@gmail.com commented 6 years ago

Thanks for your detail answer.

I updated to 4.12 and there is no more blank screen, I think it was a bug but the problem that exist is that when I use MDBSmoothScroll inside another ScrollBar, it doesn't scroll and it only works in the full page. Here is the sample.

.RowsContainer { height: 75vh;}

import React, { Component } from "react"; import { MDBNavbar, MDBNavbarBrand, MDBBtn, MDBNavbarNav, MDBNavItem, MDBSmoothScroll, MDBContainer, MDBRow} from "mdbreact";

class NavbarPage extends Component {render() { const outerContainerStyle = { height: "800px" }; return ( Navbar Section 1 Section 2

            <MDBRow
              id="section1"
              style={outerContainerStyle}
              className="my-5 "
            >
              <h2>Section 1</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean orci erat, suscipit nec risus nec, ultrices pretium
                tortor. In imperdiet sem a lacus eleifend tempus. Donec est
                dui, finibus ac mattis eu, interdum eu nulla. Nulla
                pellentesque mi at mattis hendrerit. Etiam tempus, purus nec
                placerat ullamcorper, risus urna vestibulum erat, ut
                vestibulum libero ligula eu lorem. Cras nec mauris vel velit
                volutpat semper id quis nisl. Nunc ac interdum nisi. Fusce
                pharetra interdum urna vel ultricies. Nunc porttitor nisl eu
                odio vehicula, quis aliquam urna accumsan.
              </p>
              <p id="a1002">
                Quisque aliquet risus eget consequat euismod. Nulla
                elementum nunc volutpat tellus mattis gravida. In hac
                habitasse platea dictumst. Pellentesque cursus ullamcorper
                nisl nec gravida. Curabitur vitae tortor pretium, rhoncus
                nulla viverra, molestie nulla. Nullam ullamcorper orci eget
                ante varius, ut cursus ipsum aliquet. Suspendisse quis nisl
                quis nunc auctor fermentum ac at lorem. Ut eu vestibulum
                ipsum. Nam tristique feugiat ex, vitae commodo odio aliquam
                quis. Nullam mollis maximus tellus ultricies interdum. Donec
                fermentum quis ligula a auctor. In sit amet ultrices massa,
                et sagittis dui.
              </p>
              <p>
                Duis tempus tellus felis, et maximus metus pulvinar sit
                amet. Pellentesque risus sem, aliquam molestie diam quis,
                congue maximus elit. Curabitur tristique auctor augue
                ultrices blandit. Vestibulum ante ipsum primis in faucibus
                orci luctus et ultrices posuere cubilia Curae; Donec sed
                ornare augue. Donec pulvinar non enim nec commodo. Aliquam
                viverra nisi quis nisi cursus tempus.
              </p>
              <p>
                Fusce pellentesque tellus id enim sagittis, nec euismod sem
                malesuada. Nunc in rutrum nisi. Sed vehicula eros nisl, ac
                accumsan tortor dictum nec. Praesent sed vestibulum est,
                eget rhoncus nisi. Suspendisse id tincidunt nisi, sed
                finibus risus. Aliquam aliquam condimentum sem, et
                scelerisque leo porttitor sed. Nam ut est vel sapien
                dignissim bibendum vitae vel justo. Quisque consequat porta
                tempor. Phasellus nec justo sit amet felis placerat aliquam
                sit amet ac mauris. Sed rutrum tellus nec nunc mollis, id
                mattis velit lobortis.
              </p>
              <p>
                Etiam dictum eu diam malesuada semper. Curabitur sed
                facilisis eros. Sed ac eros leo. Interdum et malesuada fames
                ac ante ipsum primis in faucibus. Aenean sit amet ipsum
                odio. Donec maximus nunc id nulla iaculis, quis fermentum
                ligula sagittis. Aenean faucibus finibus diam, sit amet
                ultrices elit suscipit id. Vestibulum bibendum eu erat quis
                facilisis. Nunc finibus vehicula augue, eu fringilla lectus
                laoreet sit amet. Morbi massa diam, elementum non vulputate
                nec, ultrices et ex.
              </p>
            </MDBRow>

            <MDBRow
              id="section2"
              style={outerContainerStyle}
              className="my-5"
            >
              <h2>Section 2</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean orci erat, suscipit nec risus nec, ultrices pretium
                tortor. In imperdiet sem a lacus eleifend tempus. Donec est
                dui, finibus ac mattis eu, interdum eu nulla. Nulla
                pellentesque mi at mattis hendrerit. Etiam tempus, purus nec
                placerat ullamcorper, risus urna vestibulum erat, ut
                vestibulum libero ligula eu lorem. Cras nec mauris vel velit
                volutpat semper id quis nisl. Nunc ac interdum nisi. Fusce
                pharetra interdum urna vel ultricies. Nunc porttitor nisl eu
                odio vehicula, quis aliquam urna accumsan.
              </p>
              <p>
                Quisque aliquet risus eget consequat euismod. Nulla
                elementum nunc volutpat tellus mattis gravida. In hac
                habitasse platea dictumst. Pellentesque cursus ullamcorper
                nisl nec gravida. Curabitur vitae tortor pretium, rhoncus
                nulla viverra, molestie nulla. Nullam ullamcorper orci eget
                ante varius, ut cursus ipsum aliquet. Suspendisse quis nisl
                quis nunc auctor fermentum ac at lorem. Ut eu vestibulum
                ipsum. Nam tristique feugiat ex, vitae commodo odio aliquam
                quis. Nullam mollis maximus tellus ultricies interdum. Donec
                fermentum quis ligula a auctor. In sit amet ultrices massa,
                et sagittis dui.
              </p>
              <p>
                Duis tempus tellus felis, et maximus metus pulvinar sit
                amet. Pellentesque risus sem, aliquam molestie diam quis,
                congue maximus elit. Curabitur tristique auctor augue
                ultrices blandit. Vestibulum ante ipsum primis in faucibus
                orci luctus et ultrices posuere cubilia Curae; Donec sed
                ornare augue. Donec pulvinar non enim nec commodo. Aliquam
                viverra nisi quis nisi cursus tempus.
              </p>
              <p>
                Fusce pellentesque tellus id enim sagittis, nec euismod sem
                malesuada. Nunc in rutrum nisi. Sed vehicula eros nisl, ac
                accumsan tortor dictum nec. Praesent sed vestibulum est,
                eget rhoncus nisi. Suspendisse id tincidunt nisi, sed
                finibus risus. Aliquam aliquam condimentum sem, et
                scelerisque leo porttitor sed. Nam ut est vel sapien
                dignissim bibendum vitae vel justo. Quisque consequat porta
                tempor. Phasellus nec justo sit amet felis placerat aliquam
                sit amet ac mauris. Sed rutrum tellus nec nunc mollis, id
                mattis velit lobortis.
              </p>
              <p>
                Etiam dictum eu diam malesuada semper. Curabitur sed
                facilisis eros. Sed ac eros leo. Interdum et malesuada fames
                ac ante ipsum primis in faucibus. Aenean sit amet ipsum
                odio. Donec maximus nunc id nulla iaculis, quis fermentum
                ligula sagittis. Aenean faucibus finibus diam, sit amet
                ultrices elit suscipit id. Vestibulum bibendum eu erat quis
                facilisis. Nunc finibus vehicula augue, eu fringilla lectus
                laoreet sit amet. Morbi massa diam, elementum non vulputate
                nec, ultrices et ex.
              </p>
            </MDBRow>
            <MDBBtn>
              <MDBSmoothScroll to="a1002">a1002</MDBSmoothScroll>
            </MDBBtn>
          </MDBScrollbar>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  </React.Fragment>
);

}} export default NavbarPage;

Aliaksandr Andrasiuk staff commented 6 years ago

Hello,

Unfortunately, you can't use <SmoothScroll> inside <ScrollBar> like this. But instead of using <SmoothScroll> you can try to use <ScrollSpy> which serves to solve such problems:

https://mdbootstrap.com/docs/react/navigation/scrollspy

Best regards,

Aliaksandr from MDB.

Add comment