Gatsby's Link overrides scrolling behavior with anchors

[alexkirsz]

Description

When clicking on an anchor <Link />, Gatsby will take it upon itself to scroll to the corresponding element if it exists, or to the top of the page if it doesn't. See

gatsby/packages/gatsby-link/src/index.js

Lines 141 to 152 in 483749d

	if (pathname === location.pathname || !pathname) {
	const element = hash
	? document.getElementById(hash.substr(1))
	: null
	if (element !== null) {
	element.scrollIntoView()
	} else {
	// This is just a normal link to the current page so let's emulate default
	// browser behavior by scrolling now to the top of the page.
	window.scrollTo(0, 0)
	}
	}

This is inconsistent with react-router's <Link /> component which simply pushes a new history entry and leaves the scrolling up to the user.

This behavior prohibits me from using Gatsby's <Link /> for anchor links, as I want to override the scrolling part with a smooth scrolling behavior. Instead, I created my own <CustomLink /> component that uses Gatsby's push API.

Steps to reproduce

import { Link } from "gatsby";

ReactDOM.render(<Link to="/#about" />, document.getElementById("app"));

Expected result

Clicking the Link doesn't affect the page's scroll.

Actual result

Clicking the Link affects the page's scroll.

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.4.0 - /usr/local/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 61.0.1
    Safari: 11.1.2
  npmPackages:
    gatsby: next => 2.0.0-beta.61
    gatsby-plugin-feed: next => 2.0.0-beta.4
    gatsby-plugin-google-analytics: next => 2.0.0-beta.3
    gatsby-plugin-jss: next => 2.0.2-beta.3
    gatsby-plugin-offline: next => 2.0.0-beta.5
    gatsby-plugin-react-helmet: next => 3.0.0-beta.4
    gatsby-plugin-sharp: next => 2.0.0-beta.7
    gatsby-remark-copy-linked-files: next => 2.0.0-beta.3
    gatsby-remark-images: next => 2.0.1-beta.9
    gatsby-remark-prismjs: next => 3.0.0-beta.5
    gatsby-remark-responsive-iframe: next => 2.0.0-beta.3
    gatsby-remark-smartypants: next => 2.0.0-beta.3
    gatsby-source-filesystem: next => 2.0.1-beta.10
    gatsby-transformer-remark: next => 2.1.1-beta.5
    gatsby-transformer-sharp: next => 2.1.1-beta.6

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[JulianOrozcoC]

Please share the repo so I can reproduce the error!

[alexkirsz]

This isn’t an error, this is more of a feature. I created this issue to discuss the relevancy of such a feature. I’ll make an example repo ASAP.

[gatsbot]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.